JS结合Svelte开发时等待Promise决议获取卡片数据的问题

最简适配方案 #

你可以直接在loadJson返回的Promise后挂载then回调处理数组取元素，.then()本身会返回新的Promise，完全符合Svelte{#await}块的输入要求，无需额外编写异步函数处理作用域：

<script>
async function loadJson(path) {
    const response = await fetch(path);
    const cards = await response.json();
    return cards; 
}

// 一行完成请求+取第一个元素，返回值为Promise类型
let card = loadJson('./hsk1.json').then(cards => cards[0]);
</script>

{#await card}
    <p>...waiting</p>
{:then card}
    <Card {card}/>
{/await}

需要复用完整卡片列表的方案 #

如果你后续需要操作整张卡片列表（比如实现切换卡片功能），可以先缓存列表的Promise，后续操作都复用这个缓存避免重复发起请求：

<script>
async function loadJson(path) {
    const response = await fetch(path);
    const cards = await response.json();
    return cards; 
}

// 缓存卡片列表Promise，只会发起一次请求
const cardsPromise = loadJson('./hsk1.json');
let card = cardsPromise.then(cards => cards[0]);

// 示例：切换到指定索引的卡片
async function switchCard(index) {
    const cards = await cardsPromise;
    // 用Promise.resolve包装普通值，保持card为Promise类型适配await块
    card = Promise.resolve(cards[index]);
}
</script>

{#await card}
    <p>...waiting</p>
{:then card}
    <Card {card}/>
{/await}

<button on:click={() => switchCard(1)}>下一张卡片</button>

更简洁的顶层await方案 #

Svelte 3.47及以上版本支持顶层await语法，无需包裹async函数，也可以省略{#await}块，Svelte会自动等待异步操作完成后再渲染组件：

<script>
async function loadJson(path) {
    const response = await fetch(path);
    const cards = await response.json();
    return cards; 
}

// 顶层await无需包async函数
const cards = await loadJson('./hsk1.json');
let card = cards[0];
</script>

<!-- 无需await块，直接渲染即可 -->
<Card {card}/>

原生Svelte项目使用该特性需要在打包工具配置中开启顶层await支持，SvelteKit项目默认支持该语法。

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