Async await promise.all and multiple APIs-CodePudding

I wanna make a list with pokemons and picture next to each name. i get list from api then combine all names to general APi adress and make array of fetches. My problem was returned list was unordered to order it there is asyns await and console.log name(process function). but it doesn't work/ could you help me with that? 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)
            })
          }

CodePudding user response：

By default, the return value of Promise.all will maintain the order that is given. So, in your case, after the Promise.all for arrForFetch finishes, you WILL have an ordered array of response data.

It seems you are trying to convert this response data to JSON format and then display the IDs of individual pokemon. You can use a Promise.all here as well. I modified your implementation a bit in the following piece of code:

          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);
          })

However, if you prefer your own solution i.e. without a Promise.all for the JSON conversion, you can do it as follows:

          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) })
          }

CodePudding user response：

There are some issues with your implementation, let's fix them step by step:

You defined the arrForFetch, so far so good.

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

Now, you have an array, each element of this array is now a promise and needs to be resolved or rejected. So, checking them with Promise.all() method just after the let arrForFetch without defining any function:

function process(prom) => {
  prom.then(consoe.log).catch(console.error)
}

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

Promise.all(arrForFetch)
  .then(result => result.forEach(file => process(file.json())))
  .catch(console.error)