如何在Promise.all中使用async/await 保证Pokemon API返回数据顺序正确

问题根源 #

Promise.all返回的响应数组本身和原始请求数组顺序完全一致，你遇到的顺序错乱问题来自后续的json解析步骤：每个响应对象调用.json()会返回独立的异步Promise，你没有统一等待所有解析任务完成，而是为每个Promise单独绑定回调，回调触发顺序由解析速度决定，和原始顺序无关。

修正方案 #

写法1：Promise链式调用 #

把所有json解析的Promise也用Promise.all包裹，保证拿到的结果顺序和原始请求顺序一致：

Promise.all(arrForFetch)
  .then(files => {
    // 收集所有json解析Promise，统一等待完成
    return Promise.all(files.map(file => file.json()))
  })
  .then(pokemonList => {
    // pokemonList顺序与arrForFetch完全一致，按顺序处理即可
    pokemonList.forEach(data => {
      console.log(data.name)
      // 宝可梦图片渲染逻辑写在这里即可保证顺序正确
    })
  })
  .catch(err => console.log("请求或解析出错：", err))

写法2：async/await 语法（更易读） #

const getPokemonList = async () => {
  try {
    // 等待所有接口请求完成
    const responseList = await Promise.all(arrForFetch)
    // 等待所有json解析完成，顺序保持不变
    const pokemonList = await Promise.all(responseList.map(res => res.json()))
    // 按顺序遍历处理
    for (const pokemon of pokemonList) {
      console.log(pokemon.name)
      // 渲染图片逻辑
    }
  } catch (err) {
    console.log("操作出错：", err)
  }
}
getPokemonList()

核心原理 #

Promise.all的返回结果数组顺序永远和传入的Promise数组顺序保持一致，不会受内部Promise完成先后的影响。只要把所有异步操作都通过Promise.all统一等待，最终拿到的结果顺序就和原始请求顺序完全匹配。

内容的提问来源于stack exchange，提问作者DeanWinchester88