How to convert await data into single array?

Question

I have this code, wherein i'd like to make it in single array.

The output that data produce, is like this:

  connections.elements.map((val: any) => {
   const url = 'link'
   return new Promise((resolve) => {
      axios.post(url, val.firstName).then((res: { data: any }) => {
        resolve(searchRequestBuilder(res.data.AllResults));
      });
    });
  });

  const searchRequestBuilder = async (data: any) => {
    console.log(await data);
    // for await (let resolvedPromise of data) {
    // console.log(resolvedPromise);
    // }
  };

What I'd like to do is like this:

I already tried to make a variable and use .push, but it still doesn't combine in a single array. What was the thing I am missing?

Answer 1

So since your .map function will return an array of promises, you can store that in a variable, and you can use Promise.all or Promise.allSettled to wait for all the apis to resolve and you can get all the results in a single array in the order that it is requested.

Not part of the question, another thing is if you are not careful, and use await on each api request, it can make a waterfall pattern of requests, which means it will wait for API 1 to finish, then API 2 to finish. But the way its written here, it will make all the requests parallely, so this will request all the APIs together, and once the last one gets resolved the Promise.all or allSettled will trigger its callback.

    const searchRequestBuilder = async (data: any) => {
         console.log(await data);
    }
    async function makeAPIrequests(){    
         let arrrayOfPromises = connections.elements.map((val: any) => {
           const url = 'link'
           return new Promise((resolve) => {
              axios.post(url, val.firstName).then((res: { data: any }) => {
                resolve(searchRequestBuilder(res.data.AllResults));
              });
            });
          });
        
         Promise.allSettled(arrrayOfPromises).
            then((results) => console.log(results))
 
    }

Edit: Also in addition to this, I do not think that you need to return a new Promise inside the map funciton, if you just return axios it should work, since axios itself will return a promise.