Svelte中如何使用await块并更新状态，是否应当避免使用await块？

不需要刻意避免使用await块 #

await块是Svelte官方原生提供的异步渲染语法糖，专门用来简化「请求中-请求成功-请求失败」三类状态的模板渲染逻辑，不需要自己手动维护loading、error、result三个独立的响应式变量，能大幅减少模板冗余代码，符合Svelte的轻量化设计思路，常规异步渲染场景完全可以放心使用。

更新numbers变量的常规实现方案 #

根据你的业务需求，常用的有两种落地方式：

方案1：请求完成后自动更新numbers #

适合拿到随机数之后直接追加到列表的场景，只需要在handleClick里监听promise的完成状态即可，修改后的完整代码如下：

<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();
        // 监听请求结果更新列表
        promise.then(newNum => {
            // 数组需要重新赋值才会触发Svelte响应式更新
            numbers = [...numbers, Number(newNum)]
        }).catch(() => {
            // 错误已在await块中做展示处理，此处仅用来捕获避免控制台抛未捕获异常
        })
    }
</script>

<button on:click={handleClick}>
    生成随机数
</button>

{#each numbers as number}
<p>
    {number}
</p>
{/each}
{#await promise}
    <p>...正在请求</p>
{:then newNum}
    <p>本次生成的随机数：{newNum}</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

方案2：用户确认后再更新numbers #

适合先展示请求结果，用户手动确认后再追加到列表的场景，只需要调整await块的成功分支即可：

{#await promise}
    <p>...正在请求</p>
{:then newNum}
    <div>
        <p>本次生成的随机数：{newNum}</p>
        <button on:click={() => numbers = [...numbers, Number(newNum)]}>添加到列表</button>
    </div>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

注意事项 #

• Svelte的数组响应式依赖赋值触发，仅调用push、splice等数组方法不会触发更新，操作后需要给数组重新赋值
• 如果你的异步逻辑非常复杂，涉及多分支判断、多个关联依赖请求，也可以手动维护状态变量，不需要强行使用await块

内容的提问来源于stack exchange，提问作者David