Waiting for all promises called in a loop to finish

Question

I'm using the axios promise library, but my question applies more generally I think. Right now I'm looping over some data and making a single REST call per iteration.
As each call completes I need to add the return value to an object. At a high level, it looks like this:

var mainObject = {};  myArrayOfData.forEach(function(singleElement){   myUrl = singleElement.webAddress;   axios.get(myUrl)   .then(function(response) {     mainObject[response.identifier] = response.value;    }); });  console.log(convertToStringValue(mainObject)); 

What's happening of course is when I call console.log the mainObject doesn't have any data in it yet, since axios is still reaching out. What's a good way of dealing with this situation?

Axios does have an all method along with a sister spread one, but they appear to be of use if you know ahead of time how many calls you'll be making, whereas in my case I don't know how many loop iterations there will be.

Answer 1

You need to collect all of your promises in an array and then use Promise.all:

// Example of gathering latest Stack Exchange questions across multiple sites  // Helpers for example  const apiUrl = 'https://api.stackexchange.com/2.2/questions?pagesize=1&order=desc&sort=activity&site=',      sites = ['stackoverflow', 'ubuntu', 'superuser'],      myArrayOfData = sites.map(function (site) {          return {webAddress: apiUrl + site};      });    function convertToStringValue(obj) {      return JSON.stringify(obj, null, '\t');  }    // Original question code  let mainObject = {},      promises = [];    myArrayOfData.forEach(function (singleElement) {      const myUrl = singleElement.webAddress;      promises.push(axios.get(myUrl));  });    Promise.all(promises).then(function (results) {      results.forEach(function (response) {          const question = response.data.items[0];          mainObject[question.question_id] = {              title: question.title,              link: question.link          };      });        console.log(convertToStringValue(mainObject));  });

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

It's described in axios docs (Performing multiple concurrent requests section).

Before May 2020 it was possible to do with axios.all(), which is now deprecated.