如何在Svelte中使用await块并更新状态

Question

在 https://svelte.dev/tutorial/await-blocks 的示例基础上，更新 numbers 和使用 await block 的传统方法是什么？还是应该完全避免使用 await block?

<script>
    let numbers = [1, 2, 3]
    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();

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

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

{#each numbers as number}
<p>
    {number}
</p>
{/each}
{#await promise}
    <p>...waiting</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

- David

Answer 1

Svelte只需要知道赋值操作，您可以使用展开运算符创建新数组，或者直接调用赋值操作。

// option 1
const newNumber = await promise;
numbers.push(newNumber);
numbers = numbers;

或者

// option 2
const newNumber = await promise;
numbers = [...numbers, newNumber]

我个人认为选项1是可行的，因为它不会分配任何内存来创建新数组，而是修改现有数组。然后赋值只是让编译器知道你修改了数组。

参见 Svelte 文档：https://svelte.dev/docs#2_Assignments_are_reactive 关于在您的示例中使用 {#await} 块，纯粹是为了通知用户正在进行某些操作。您有一个要向其中添加数据的数组 numbers 和一个获取更多数据的 promise。没有一种非常干净的方法让 await 块为您执行修改 numbers 的工作，但也没有理由避免使用该块。

例如，这样将 不会 更新数据：

{#await promise}
    <p>...waiting</p>
{:then data}
   <!-- html markup here is the convention -->
   <p> {numbers = [...numbers, data]} </p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

数据更新应在JS中完成，而块应该处理显示逻辑。你可以看到上面的内容有点奇怪。

- SoluableNonagon

---

谢谢回复。我的问题可能不太清楚。我想知道如何与await块结合使用（如果有必要的话）。我更新了问题：“更新numbers的常规方法是什么，同时使用await块，还是应该完全避免使用await块？” - David

@David，我更新了我的答案以反映你的问题。 - SoluableNonagon

Answer 2

不确定这是否是传统的方法，但是按照以下方式更新handleClick似乎可以解决问题：

async function handleClick() {
    promise = getRandomNumber();
    const newNumber = await promise
    numbers = [...numbers, newNumber]
}

请查看完整结果Svelte REPL。

- David