如何在Svelte中结合响应式特性使用异步函数？

问题根源很明确：async函数执行后返回的是Promise对象，而非直接的数组。你原来的写法把Promise直接赋值给了my_list，而Svelte的{#each}无法遍历Promise，自然就不工作了。

修改后的完整代码 #

<h1>Test array</h1>

{#each my_list as item}
    <div>{item}</div>
{/each}

<script>
    let started = false;
    let my_list = [];
    let param = 0;

    // 用响应式块处理异步逻辑
    $: {
        const loadData = async () => {
            const data = await analyseData(param);
            my_list = data;
        };
        loadData();
    }
    
    setTimeout(() => {
        param = 1;
    }, 5000);
    
    async function analyseData() {
        if (!started) {
            started = true;
            return [0];
        }
        // 模拟异步读取文件的延迟
        await new Promise(resolve => setTimeout(resolve, 200));
        return [1, 2, 3];
    }
</script>

关键修改点 #

1. 用响应式代码块包裹异步逻辑：Svelte的$:标记后可以跟代码块，我们在块内定义异步函数loadData，通过await等待analyseData的结果，再把结果赋值给my_list。这样my_list始终是数组类型，{#each}就能正常渲染。
2. 保留响应式触发：当param变化时，$:块会重新执行，自动触发新一轮的异步数据加载，保证数据和状态同步。

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