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 then use axios.all:

var mainObject = {},
    promises = [];

myArrayOfData.forEach(function(singleElement){
  myUrl = singleElement.webAddress;
  promises.push(axios.get(myUrl))
});

axios.all(promises).then(function(results) {
    results.forEach(function(response) {
        mainObject[response.identifier] = response.value;
    })
});

console.log(convertToStringValue(mainObject));

It's described in the axios docs