避免在我的 fetch Svelte 组件中阻塞

Question

我正在从我的 Svelte 项目中的外部源获取 JSON。

当我在 await 块周围使用 if 块时，它起作用了。但是当我删除 if 块时，它给出了 object is undefined.

的错误

如何避免使用 if 块并使其正常工作？我不明白为什么 if 块会使错误消失。

这是一个非常简单的脚本。你可以通过clicking here.

查看REPL

Answer 1

您没有将 program 初始化为任何东西，因此等待它会引发错误。将其设置为 fetchPrograms 的初始结果将允许您删除 if 块。 {#await} tutorial 就是这样做的。

<!-- Fetch.svelte -->
<script>
    export let url;
    let program = fetchPrograms();

    async function fetchPrograms(url) {
        const response = await fetch(url)
        program = await response.json()
    }
    
    $: fetchPrograms(url)
</script>

<button on:click={() => url='https://reqres.in/api/users?page=4'} style="color:red">
    Fetch
</button>
{#await program}
xx
{:then item}
<p style="color:red">
    {item.page}
</p>
{:catch error}
omg
{/await}

避免在我的 fetch Svelte 组件中阻塞

Avoid if block in my fetch Svelte component

svelte

svelte-component

svelte-3