迭代异步函数导致苗条答案

【问题标题】：iterate over async function result in svelte迭代异步函数导致苗条
【发布时间】：2019-11-18 22:15:01
【问题描述】：

我正在尝试迭代某个异步函数返回的一些值。

import { onMount } from 'svelte';

let navigation;

onMount(async function(){
    navigation = FETCHER.data.navigation;
    console.log(navigation);
});

然后在html中

{#await navigation}
    {#each navigation.main as menuItem}
        foobar
    {/each}
{/await}

但是“foobar”从未曝光。

在导航里面我找到了这个数据结构：

main: (3) […]
0: Object { ID: 16, url: "http://127.0.0.1/", title: "Welcome", … }
1: Object { ID: 15, url: "http://127.0.0.1/", title: "Home", … }
2: Object { ID: 176, url: "http://127.0.0.1/test/", title: "test", … }
length: 3

我真的很好奇为什么 await 块内的任何东西都没有被渲染。我的承诺有问题吗？

旁注中可能很重要的一件事：FETCHER.data.navigation 变量是使用 wp_localize_script 从 WordPress 传递的，因此不会发出任何 fetch 调用。

感谢您提前提供任何意见。

最好，世博

【问题讨论】：

什么是FETCHER.data.navigation？承诺？
这是一个通过 wp_localize_script 从 WordPress 注入的对象

标签： svelte

【解决方案1】：

await 的正确语法需要then block：

{#await navigation}
    <p>awaiting...</p>
{:then navigation}
    {#each navigation.main as menuItem}
        foobar
    {/each}
{:catch error}
    <p>error</p>
{/await}

然而，这取决于 promise 正确解析的事实，并且在异步函数的情况下，需要一个 返回值。此处的代码中，异步函数没有返回任何内容，这将无法正确解析。

因此，更正 await 块语法并从 Promise 返回一个值，以下应该可以工作：

<script>
    import { onMount } from 'svelte';
    let promise;
    async function fetchStuff() {
        return FETCHER.data.navigation;
    }
    onMount(() => {
        promise = fetchStuff();
    });
</script>

{#await promise}
<p>
    awaiting...
</p>
{:then navigation}
<p>
    here access navigation
</p>
{:catch error}
<p>
    oh noes.
</p>
{/await}

【讨论】：