异步等待 promise.all 和多个 API

Question

我想列出每个名字旁边的口袋妖怪和图片。我从 api 获取列表，然后将所有名称组合到一般的 APi 地址并制作获取数组。我的问题是返回的列表是无序的，它有异步等待和 console.log 名称（进程函数）。但它不起作用/你能帮我吗？ Codepen link

        (async function(){  
        await Promise.all(arrForFetch)
                     .then(async files  =>{
                     for(let i = 0; i < files.length;  i++){
                      // console.log("files", files[i])
                      process(  await files[i].json())
                    }
                   //   files.forEach(  file =>{
                   //   console.log("files", file)
                   //   process(  file.json() )
                   // })
                  // .catch(err  =>  console.log("tobie pizda ucziekaj"))
                   })
                    .catch(err  =>  console.log("tobie pizda ucziekaj"))
            
          })();
          let process =   (prom)  => {
              prom.then(  data =>{
              console.log(data.id)
            })
          }

Answer 1

默认情况下，Promise.all 的返回值将保持给定的顺序。因此，在您的情况下，在 arrForFetch 的 Promise.all 完成后，您将拥有一个有序的响应数据数组。

您似乎正在尝试将此响应数据转换为JSON 格式，然后显示各个口袋妖怪的 ID。您也可以在此处使用Promise.all。我在以下代码中稍微修改了您的实现：

          let arrForFetch = pokeNames.map(elem  => fetch(" https://pokeapi.co/api/v2/pokemon/"+`${elem}` )    );

          //multiple APis fetching
          Promise.all(arrForFetch).then((jsonData) => {

            // creating array to convert each of the data entries to JSON format
            let JsonConversionArray = jsonData.map(data => data.json());
            
            // Using Promise.all similar to previous implementation.
            Promise.all(JsonConversionArray).then((data) => {
              const idArray = data.map((pokemon) => pokemon.id);
              console.log(idArray);
            })

          }).catch((err) => {
            console.log(err);
          })

但是，如果您更喜欢自己的解决方案，即没有 Promise.all 用于 JSON 转换，您可以按以下方式进行：

          let arrForFetch = pokeNames.map(elem  => fetch(" https://pokeapi.co/api/v2/pokemon/"+`${elem}` )    );
          //multiple APis fetching
          Promise.all(arrForFetch).then((files) => {
            
            // Iterating through files array
            for (let i=0; i<files.length; i++) {

              // You need not use await here because you are already using a then
              // clause in the process() function
              process(files[i].json())

            }
            
          }).catch((err) => {
            console.log(err);
          });
    
          // Function to display the id of the pokemon from the JSON
          function process (prom) {
            prom.then(data => { console.log(data.id) })
          }