svelte - 避免我的 fetch Svelte 组件中的 if 阻塞

Question

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

当我if在块周围使用块时，await它可以工作。但是当我删除if块时，它给出了一个错误object is undefined。

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

这是一个非常简单的脚本。您可以通过单击此处查看 REPL 。

标签： sveltesvelte-3svelte-component

Answer 1

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

<!-- 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}