Svelte 中的每個異步

Question

我嘗試在 svelte 中使用 async #each循環，發現它無論如何都同步運行，使用 async await function 如下所示：

{#each items as item (item.id)}
    {#await render(item) then source}
        <Canvas {source} />
    {:catch}
        <p>error</p>
    {/await}
{/each}

發現它沒有辦法在 svelte 中使用異步組件，因為 onmount 不能像這樣異步使用：

{#each items as item (item.id)}
    <Canvas {item} />
{/each}

有沒有解決這個問題的方法？

Answer 1

你還沒有真正弄清楚什么是行不通的。 您可以在onMount中運行異步調用並在{#await}塊中等待承諾。

這是一個人為的REPL ，它構建了一個 promise 數組，使用Promise.all來解決它們，並將生成的 promise 分配給要呈現的變量。

<script>
    import { onMount } from "svelte";

    let promise;

    async function render(i) {
        return {
            id: i + 1,
            name: `item_${i + 1}`,
        };
    }

    onMount(() => {
        const array = [...Array.from({length: 5}).keys()];
        promise = Promise.all(array.map((i) => render(i)));

        return () => console.log("destroyed");
    });
</script>

{#await promise}
    <p>...rendering</p>
{:then array}
    {#if array && array.length}
        {#each array as item (item.id)}
            <p>
                {item.name}
            </p>
        {/each}
    {/if}
{:catch error}
    <p>oh dear.</p>
{/await}