如何在来自svelte的javascript中单击按钮时调用异步函数？

下面的例子来自苗条的官方文件

<script>
    async function getRandomNumber() {
        const res = await fetch(`tutorial/random-number`);
        const text = await res.text();
        if (res.ok) {
            return text;
        } else {
            throw new Error(text);
        }
    }
    
    let promise = getRandomNumber(); -------------- How does this work?

    function handleClick() {
        promise = getRandomNumber();
    }
</script>

<button on:click={handleClick}>
    generate random number
</button>

{#await promise}
    <p>...waiting</p>
{:then number}
    <p>The number is {number}</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

异步函数getRandomNumber（）{
const res=等待获取（`tutorial/random number`）；
常量文本=等待结果文本（）；
如果（res.ok）{
返回文本；
}否则{
抛出新错误（文本）；
}
}
让promise=getRandomNumber（）；------------这是怎么回事？
函数handleClick（）{
promise=getRandomNumber（）；
}
生成随机数
{#等待承诺}
…等待

{：然后是数字}
号码是{number}

{：捕获错误}
{error.message}
{/等待}

我的问题是，当我们像上面那样为函数“调用”指定“承诺”时，它应该立即调用函数。在svelte repl中，这种情况不会发生，只有在单击按钮时才会生成随机数。然而，当我修改代码以从简单的express服务器获取json时，我甚至不需要单击按钮——在应用程序启动时调用服务器。（这正是你所期望的）。发生了什么魔法

虽然可能不重要，但这是我尝试过的代码

<script>
        async function getNotes() {
        const res = await fetch('http://localhost:3001/api/notes')
        const json = await res.json()
        
        if(res.ok) {
            return json;
        } else {
            throw new Error(res)
        }
        
    }

    let promise = getNotes();
    
     function onClickGetNotes() {
        promise =  getNotes();
    }

</script>



<div class="grid-item-container card">

  
   <button on:click={onClickGetNotes}> Get Notes </button>

   {#await promise}
       .. Loading notes
   {:then notes} 
        
   {#each notes as note (note.id)}
       <div class="grid-item-container card">
          <p class="grid-item"> ID is {note.id} </p>
          <p class="grid-item"> Content is {note.content} </p>
          <lable class="grid-item" for="important"> Important 
            <input class="grid-item" type="checkbox" id="important" checked={note.important}>
          </lable>   
       </div>
   {/each}
    {:catch error}
    <p style="color: red">{error.message}</p>
   {/await}

</div>

异步函数getNotes（）{
const res=等待取数（'http://localhost:3001/api/notes')
const json=await res.json（）
如果（res.ok）{
返回json；
}否则{
抛出新错误（res）
}
}
让promise=getNotes（）；
函数onClickGetNotes（）{
promise=getNotes（）；
}
记笔记
{#等待承诺}
.. 装货通知单
{：然后注释}
{#每个注释都作为注释（note.id）}
ID是{note.ID}
内容是{note.Content}

重要的
{/每个}
{：捕获错误}
{error.message}
{/等待}

---

调用async函数以便只在单击按钮时获取json的最佳方法是什么？

当我按原样将代码复制到REPL中时，会立即在单击按钮时生成数字。这是人们所期望的，也是应该发生的

---

调用async函数以便只在单击按钮时获取json的最佳方法是什么

好吧，在你需要它之前不要叫它。如果不是您想要的，则不在组件创建时。您只需：

让我们承诺

这将显示“数字未定义”

如果要仅在发生事件时显示文本，可以将其包装为

（如果

）：

生成随机数
{promise=null}}>
重置
{#如果承诺！=null}
{#等待承诺}
…等待

{：然后是数字}
号码是{number}

{：捕获错误}
{error.message}
{/等待}
{/if}

或者，如果愿意，您可以为变量提供非承诺初始值：

let promise=0

如果你想的话，甚至是一个承诺：

let promise=promise.resolve（42）

只是添加这个供我参考。这就是我在里克斯回答之前所做的

<script>

let notes = []

async function getNotes() {

     const res = await fetch('http://localhost:3001/api/notes')
     const json =  await res.json()
     notes = json
    
     console.log('notes', notes)
    }
    
    async function onClickGetNotes() {
        await getNotes()
    }

</script>



<div class="grid-item-container card">

    <h4 class="grid-item"> Find the best</h4>

   <label class="grid-item" for="site-search">Suburb or Postcode</label>
   
   <input class="grid-item" type="search" id="site-search" name="q">
   
   <button on:click={onClickGetNotes}> Get Notes </button>

        
   {#each notes as note (note.id)}
       <div class="grid-item-container card">
          <p class="grid-item"> ID is {note.id} </p>
          <p class="grid-item"> Content is {note.content} </p>
          <lable class="grid-item" for="important"> Important 
            <input class="grid-item" type="checkbox" id="important" checked={note.important}>
          </lable>   
       </div>
   {/each}
    

</div>

let notes=[]
异步函数getNotes（）{
const res=等待取数（'http://localhost:3001/api/notes')
const json=await res.json（）
notes=json
console.log（'notes'，notes）
}
异步函数onClickGetNotes（）{
等待getNotes（）
}
找到最好的
郊区或邮政编码
记笔记
{#每个注释都作为注释（note.id）}
ID是{note.ID}
内容是{note.Content}

重要的
{/每个}

“调用异步函数以便只在单击按钮时获取json的最佳方法是什么？”不要在单击事件处理程序之外调用

getNotes（）

，谢谢，但是为什么我不能从上直接调用getNotes（）：单击？比如：click={getNotes}我不知道Svelte，所以我不能回答这个问题。Svelte只是一个编译器，所以任何js逻辑都应该适用于Svelte。这就是我担心的原因！谢谢！我不知道我是如何错过函数调用最初确实发生的（我相信这是有意的）。爱苗条！