Question

63

Waiting for all promises called in a loop to finish

rated 0 times [ 69] [ 6] / answers: 1 / hits: 42099 / 8 Years ago, fri, may 13, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

monetm

Add To Favorites

Follow

Total Points: 615

Total Questions: 103

Total Answers: 119

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

monetm questions

1 How to protect API routes in Next.js?

Fri, Feb 26, 21, 00:00, 3 Years ago

1 React props for passing color

Wed, Sep 9, 20, 00:00, 4 Years ago

1 How to catch the error when making fetch api request?

Sun, Jul 26, 20, 00:00, 4 Years ago

1 How to stop propagation on Link elements from React-Router-Dom?

Thu, Jul 2, 20, 00:00, 4 Years ago

1 Wait for an xpath in Puppeteer

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 8 Years ago elainaw · Accepted Answer

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.