How to return many Promises and wait for them all before doing other stuff

Question

I have a loop which calls a method that does stuff asynchronously. This loop can call the method many times. After this loop, I have another loop that needs to be executed only when all the asynchronous stuff is done.

So this illustrates what I want:

for (i = 0; i < 5; i++) {
    doSomeAsyncStuff();    
}

for (i = 0; i < 5; i++) {
    doSomeStuffOnlyWhenTheAsyncStuffIsFinish();    
}

I'm not very familiar with promises, so could anyone help me to achieve this?

This is how my doSomeAsyncStuff() behaves:

function doSomeAsyncStuff() {
    var editor = generateCKEditor();
    editor.on('instanceReady', function(evt) {
        doSomeStuff();
        // There should be the resolve() of the promises I think.
    })
}

Maybe I have to do something like this:

function doSomeAsyncStuff() {
    var editor = generateCKEditor();
    return new Promise(function(resolve,refuse) {
        editor.on('instanceReady', function(evt) {
            doSomeStuff();
            resolve(true);
        });
    });
}

But I'm not sure of the syntax.

Are you in control of the asynchronous calls? Do they already return promises, or can you make them return promises? — T.J. Crowder
– T.J. Crowder, Commented Jul 15, 2015 at 9:42
What exactly is the sequence? Do you need to call the other functions after all the previous async ones are finished? Or do you just need to call a function after each of the async are finished? — Vale
– Vale, Commented Jul 15, 2015 at 9:43
For now the first function doesn't return promises. That I have to implement. I want to edit my message to add some details of the workflow of my functions. And yes I need that all the stuff of the first loop to be finish before start to execute the stuff in the second loop. — Ganbin
– Ganbin, Commented Jul 15, 2015 at 9:44
Re your edit: "Maybe I have to do something like that" Yup, very much like that, except there's no s at the end of Promise. — T.J. Crowder
– T.J. Crowder, Commented Jul 15, 2015 at 10:10

T.J. Crowder · Accepted Answer · 2024-12-20 13:27:03Z

266

You can use Promise.all (spec, MDN) for that: It accepts a bunch of individual promises and gives you back a single promise that is fulfilled when all of the ones you gave it are fulfilled, or rejected when any of them is rejected. The results in the fulfillment array are in the same order as the promises in the input array.

So if you make doSomeAsyncStuff return a promise, then:

    const promises = [];
//  ^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−− use `const` or `let`, not `var`
    
    for (let i = 0; i < 5; i++) {
//       ^^^−−−−−−−−−−−−−−−−−−−−−−−− added missing declaration
        promises.push(doSomeAsyncStuff());
    }
    
    Promise.all(promises)
        .then(() => {
            for (let i = 0; i < 5; i++) {
//               ^^^−−−−−−−−−−−−−−−− added missing declaration
                doSomeStuffOnlyWhenTheAsyncStuffIsFinish();    
            }
        })
        .catch((e) => {
            // handle errors here
        });

MDN has an article on promises here. I also cover promsies in detail in Chapter 8 of my book JavaScript: The New Toys, links in my profile if you're interested.

Here's an example:

function doSomethingAsync(value) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Resolving " + value);
            resolve(value);
        }, Math.floor(Math.random() * 1000));
    });
}
   
function test() {
    const promises = [];
       
    for (let i = 0; i < 5; ++i) {
        promises.push(doSomethingAsync(i));
    }
       
    Promise.all(promises)
        .then((results) => {
            console.log("All done", results);
        })
        .catch((e) => {
            // Handle errors here
        });
}
   
test();

Sample output (because of the Math.random, what finishes first may vary, but the "All done" line will be at the end):

Resolving 3
Resolving 2
Resolving 1
Resolving 4
Resolving 0
All done [0,1,2,3,4]

Note, again, that the contents of the fulfillment array are in the order of the promises in the input array (not the order the promises were fulfilled in).

edited Dec 20, 2024 at 13:27

answered Jul 15, 2015 at 9:45

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ganbin Over a year ago

Wow, thanks a lot, now I understand much more the promises.I read a lot about promises, but until we need to use them in real code, we don't really understand all the mechanisms. Now I get it better and I can start to write cool stuff, thanks to you.

OK sure Over a year ago

Also, if you want to get these tasks to complete in order for any reason (for example mocking progress), you can change Math.floor(Math.random() * 1000) to (i * 1000)

T.J. Crowder Over a year ago

@user1063287 - You can do that if the code is in a context where await is allowed. At the moment, the only place you can use await is inside an async function. (At some point you'll also be able to use it at the top level of modules.)

jQueeny Over a year ago

Thank you for including the console.log("All done", results);. Just needed to know the results are in the same order as they we pushed into the promises array. Saved me a couple of hours testing and double checking.

T.J. Crowder Over a year ago

@jQueeny - Thanks, I should have said that in the answer (and now I have :-) ). Happy coding!

|

2Toad · Accepted Answer · 2019-10-23 22:17:40Z

15

A reusable function works nicely for this pattern:

function awaitAll(count, asyncFn) {
  const promises = [];

  for (i = 0; i < count; ++i) {
    promises.push(asyncFn());
  }

  return Promise.all(promises);
}

OP example:

awaitAll(5, doSomeAsyncStuff)
  .then(results => console.log('doSomeStuffOnlyWhenTheAsyncStuffIsFinished', results))
  .catch(e => console.error(e));

A related pattern, is iterating over an array and performing an async operation on each item:

function awaitAll(list, asyncFn) {
  const promises = [];

  list.forEach(x => {
    promises.push(asyncFn(x));
  });

  return Promise.all(promises);
}

Example:

const books = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }];

function doSomeAsyncStuffWith(book) {
  return Promise.resolve(book.name);
}

awaitAll(books, doSomeAsyncStuffWith)
  .then(results => console.log('doSomeStuffOnlyWhenTheAsyncStuffIsFinished', results))
  .catch(e => console.error(e));

answered Oct 23, 2019 at 22:17

2Toad

15.1k7 gold badges46 silver badges42 bronze badges

1 Comment

Shaun Vermaak Over a year ago

This really makes code easier to understand and cleaner. I don't think the current example (which was obviously adapted to OP's code) does this justice. This is a neat trick, thanks!

Sourav Purkait · Accepted Answer · 2020-07-04 13:13:07Z

/*** Worst way ***/
for(i=0;i<10000;i++){
  let data = await axios.get(
    "https://yourwebsite.com/get_my_data/"
  )
  //do the statements and operations
  //that are dependant on data
}

//Your final statements and operations
//That will be performed when the loop ends

//=> this approach will perform very slow as all the api call
// will happen in series


/*** One of the Best way ***/

const yourAsyncFunction = async (anyParams) => {
  let data = await axios.get(
    "https://yourwebsite.com/get_my_data/"
  )
  //all you statements and operations here
  //that are dependant on data
}
var promises = []
for(i=0;i<10000;i++){
  promises.push(yourAsyncFunction(i))
}
await Promise.all(promises)
//Your final statement / operations
//that will run once the loop ends

//=> this approach will perform very fast as all the api call
// will happen in parallal

JoeTidee · Accepted Answer · 2020-04-02 21:39:27Z

3

const doSomeAsyncStuff = async (funcs) => {
  const allPromises = funcs.map(func => func());
  return await Promise.all(allPromises);
}

doSomeAsyncStuff([
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
]);

answered Apr 2, 2020 at 21:39

JoeTidee

26.3k29 gold badges116 silver badges164 bronze badges

Comments

842Mono · Accepted Answer · 2020-06-08 18:50:51Z

Here is code that I wrote for myself in order to understand the answers stated here. I have mongoose queries in a for loop, so I put here the asyncFunction to take its place. Hope it helps anyone. You can run this script in node or any of many Javascript runtimes.

let asyncFunction = function(value, callback)
{
        setTimeout(function(){console.log(value); callback();}, 1000);
}



// a sample function run without promises

asyncFunction(10,
    function()
    {
        console.log("I'm back 10");
    }
);


//here we use promises

let promisesArray = [];

let p = new Promise(function(resolve)
{
    asyncFunction(20,
        function()
        {
            console.log("I'm back 20");
            resolve(20);
        }
    );
});

promisesArray.push(p);


for(let i = 30; i < 80; i += 10)
{
    let p = new Promise(function(resolve)
    {
        asyncFunction(i,
            function()
            {
                console.log("I'm back " + i);
                resolve(i);
            }
        );
    });
    promisesArray.push(p);
}


// We use Promise.all to execute code after all promises are done.

Promise.all(promisesArray).then(
    function()
    {
        console.log("all promises resolved!");
    }
)

Viradex · Accepted Answer · 2022-05-21 05:00:54Z

0

Here's an elegant solution for you if you want to do the same thing multiple times:

await Promise.all(new Array(10).fill(0).map(() => asyncFn()));

This creates an array with 10 items, fills it with zeros and then maps it to an array of promises.

edited May 21, 2022 at 5:00

Viradex

3,8983 gold badges16 silver badges40 bronze badges

answered Jul 14, 2021 at 16:12

natanavra

2,1603 gold badges18 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to return many Promises and wait for them all before doing other stuff

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related