使用async/await和Promise.all调用多API时返回宝可梦列表无序求助

• 参数类型不匹配：现有for循环中你已经通过await files[i].json()获取到了解析完成的宝可梦数据对象，但process函数仍将传入值作为Promise调用.then()，导致逻辑无法触发，打印不生效。
• 注释中的forEach写法由于不支持异步等待，process执行顺序由接口响应速度决定，会出现列表乱序问题。

方案1：调整process入参类型，保持for循环写法 #

这种方式和你原有代码逻辑最接近，修改量最小：

(async function(){  
  try {
    const files = await Promise.all(arrForFetch);
    // Promise.all返回顺序和arrForFetch传入顺序完全一致，按顺序遍历即可保证有序
    for(let i = 0; i < files.length;  i++){
      const data = await files[i].json();
      process(data);
    }
  } catch (err) {
    console.log("tobie pizda ucziekaj")
  }
})();

// 直接接收解析完成的宝可梦数据对象
let process = (data) => {
  console.log(data.id);
  // 此处可添加渲染逻辑：data.name是宝可梦名称，data.sprites下的字段是对应图片地址
}

如果不想修改process的原有逻辑，也可以去掉for循环中的await，直接传入Promise对象：

// for循环内修改为
process(files[i].json())

方案2：统一解析所有数据后再处理，逻辑更清晰 #

一次性完成所有请求、解析操作后再批量处理数据，更容易维护：

(async function(){  
  try {
    // 等待所有接口返回
    const files = await Promise.all(arrForFetch);
    // 解析所有响应为JSON，顺序保持和初始请求数组一致
    const pokemonList = await Promise.all(files.map(file => file.json()));
    // 按顺序处理所有宝可梦数据，不会出现乱序
    pokemonList.forEach(data => process(data))
  } catch (err) {
    console.log("tobie pizda ucziekaj")
  }
})();

let process = (data) => {
  console.log(data.id, data.name);
  // 渲染列表逻辑
}

Promise.all返回的结果顺序永远和传入的Promise数组顺序一致，和单个接口的响应速度无关，只要按返回数组的顺序处理数据，最终渲染的宝可梦列表就不会出现乱序问题。

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