取到的物品订单凌乱答案

【问题标题】：Messy order on items fetched取到的物品订单凌乱
【发布时间】：2024-01-24 13:24:01
【问题描述】：

我正在尝试在 html 上显示 10 个口袋妖怪...有时我得到的是最终结果的混乱顺序。像 id=5 的 pokemon 出现在第 2 位，依此类推。

我假设我的错误来自函数调用之间的一些异步。

我对异步函数有点陌生，所以不要认为我不好，哈哈...

所以我的代码是这样的：

pokemonAPI = "https://pokeapi.co/api/v2/pokemon?offset=0&limit=10";

async function getPokemonList(url){
    let resp = await fetch(url);
    if (resp.ok){
        let list = await resp.json();
        list.results.forEach(pokemon => {
            getPokemonData(pokemon.url);
        });
    }
}

然后getPokemonData函数：

async function getPokemonData (url){
    let resp = await fetch(url);
    if (!resp.ok){
        throw new Error(`HTTP error!, fetching pokemon data. Status: ${resp.status}`);
    }
    let data = await resp.json();
    fillContent(data);
}

fillContent 函数使用 innerHTML 向我的容器 div 元素添加新卡片。

最终结果（并非总是如此）如下所示：Display error

对我哪里出错有什么建议吗？

【问题讨论】：

在list.results.forEach 函数中，您无需等待响应即可开始请求所有口袋妖怪。响应以不同的速度出现，先到者先处理（更准确地说，await fetch(url) 首先完成并继续）。你可以看看for await ... of 而不是forEach
谢谢，我去看看。
如果你想要一个更高效的解决方案（并且 API 只为单个口袋妖怪提供端点），我建议（1）开始请求所有口袋妖怪，（2）等待所有请求完成(3) 为所有这些插入 html。您可以使用 Promise.all 来做到这一点，但这会稍微复杂一些
@A_A 成功了，谢谢。我试图在getPokemonData(pokemon.url) 上放置一个等待，但得到 SyntaxError: await 仅在异步函数和模块的顶层主体中有效。并且不明白为什么
你能告诉我们fillContent 是做什么的吗？如果您在 forEach 循环期间创建（空）DOM 节点，然后使用相应的 id 调用 fillContent，它们将以正确的顺序显示。

标签： javascript asynchronous async-await fetch

【解决方案1】：

感谢@A_A 的帮助

nvm 第一条评论，我有点糊涂了。一个简单的 for 循环 forEach 和 await getPokemonData(pokemon.url) 应该可以解决问题

所以实际上我在forEach 中一个接一个地调用我的函数getPokemonData(pokemon.url)，而没有等待它完成获取我发送的网址。

for (let pokemon of list.results){
   await getPokemonData(pokemon.url);
}

将其更改为一个简单的循环并等待我的函数结束解决它

【讨论】：