Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Await Multiple Promises Concurrently with Promise.all()

    Marius SchulzMarius Schulz

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss