嵌套提取未定义是 Svelte {#await} 块

Question

我正在使用 poke api https://pokeapi.co/ 来学习 Svelte - 我使用 fetch 来获取 pokemon 的列表，并使用嵌套的 fetch 调用来获取每个获取的 pokemon 的图像 url。结果 console.logging 时，口袋妖怪数组看起来不错，附加了 imgUrl。

JavaScript（苗条）：

async function fetchGroup() {
    const response = await fetch('https://pokeapi.co/api/v2/type/11').then(result => result.json());
    response.pokemon.forEach(async (elem, index) => {
        const imgUrl = await fetch(elem.pokemon.url).then(result => result.json().then(result => result.sprites.front_default))
        elem.pokemon = { ... response.pokemon[index].pokemon, ... { imgUrl : imgUrl }}
    })
    console.log(response.pokemon); // this log returns the correct obejct with imgUrl appended
    return response.pokemon;
}

但是，附加值似乎在 {#await} 块中未定义

{#await pokemonsList}
    waiting...
    {:then response}
        {#each response as responseItem}
            {responseItem.pokemon.name} this is alright!
            {responseItem.pokemon.imgUrl} this is undefined 
        {/each}
    {:catch error}
        {error.message}
{/await}

这是怎么回事？

Answer 1

如评论中所述，您需要 await 您在 forEach 中所做的事情。为此，您需要将 response.pokemon.forEach( 转换为 await Promise.all(response.pokemon.map(:

async function fetchGroup() {
    const response = await fetch('https://pokeapi.co/api/v2/type/11').then(result => result.json());
    await Promise.all(response.pokemon.map(async (elem, index) => {
        const imgUrl = await fetch(elem.pokemon.url)
                    .then(result => result.json()
                    .then(result => result.sprites.front_default))
        elem.pokemon = { ... response.pokemon[index].pokemon, ... { imgUrl : imgUrl }}
    }))
    return response.pokemon;
}

这是一个有效的 REPL。

嵌套提取未定义是 Svelte {#await} 块

Nested fetch is undefined is Svelte {#await} block

javascript

fetch

async-await

svelte