Await Multiple Promises Concurrently with Promise.all()

Marius Schulz
InstructorMarius Schulz
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

Oftentimes, you want to kick off multiple promises in parallel rather than awaiting them in sequence. This lesson explains how that can be achieved in a readable manner using await, the Promise.all() method, and destructuring assignment.

[00:00] In this lesson, I want to show you how to await multiple asynchronous operations using the Promise.all method. Promise.all accepts a sequence of promises and returns a single new promise. If all of the passed-in promises are resolved, a return promise is resolved as well. Otherwise, it is rejected.

[00:20] The idea is that the Promise.all method can be used to aggregate the results of multiple promises. In our example, we want to make two requests to the GitHub API. We want to fetch a user, and then also a list of their repositories.

[00:35] We are going to call the Promise.all method with an array of two promises. We are then going to await the promise that is returned by Promise.all, and we're going to store the results in a variable called results.

[00:49] This variable contains an array with the values of the passed-in promises. In our case, this is an array with two elements. The order of the values corresponds to the order of the promises in this array. This means that we can find the user at index 0and the repositories at index 1.

[01:09] To demonstrate that this approach works, let's log the username and the repository count to the console, as we did in previous examples. If we quickly run the program, we get the data we expect.

[01:24] Now that we've seen that our program works, I want to do a small refactoring. We can get rid of these two lines and directly destructure this array into a user and the repositories using the ES2015 destructuring syntax.

[01:38] In my opinion, the code was pretty nice to read. We have the user promise here, and the user value here, and we have the repos promise here, and the repos up here. Remember that the order of the promises that you pass into Promise.all determines the order of the resulting values in the array.

[01:59] There are two more things I want to mention. In our example, we've used the Promise.all method with an array, but it actually works with any iterable. Also, the Promise.all method has fail-fast behavior.

[02:13] If any of the passed-in promises is rejected, the return promise is immediately rejected as well. In that case, Promise.all does not wait for all passed-in promises to be settled. Let's run our program one more time to make sure we haven't broken anything. It looks like everything is still working just fine.

Rolando Barbella
Rolando Barbella
~ 7 years ago

Hey, really nice series, thanks. So, what you think would be the main difference between using async await and generators?

Marius Schulz
Marius Schulzinstructor
~ 7 years ago

Generators offer additional flexibility. The async and await keywords offer syntactic sugar for simple awaits, but with yield and generators, you get more fine-grained control over when and how to pause and resume a function.

Markdown supported.
Become a member to join the discussionEnroll Today