Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Asynchronous Programming with JavaScript

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Handle Multiple Promises with Promise.all

3:35 with Guil Hernandez

JavaScript promises provide an efficient way to fire off and keep track of multiple asynchronous operations with the Promise.all method. Promise.all is useful when your program needs to wait for more than one promise to resolve.

Alternative solutions

Using forEach()

Below is another way you could write the generateHTML function using the forEach array iteration method.

forEach() executes its callback function once for each array element, whereas map() does the same but creates a new array with the results of executing its callback on every item in the original array.

function generateHTML(data) {
  data.forEach( person => {
    const section = document.createElement('section');
    peopleList.appendChild(section);

    // Check if request returns a 'standard' page from Wiki
    if (person.type === 'standard') {
      section.innerHTML = `
        <img src=${person.thumbnail.source}>
        <h2>${person.title}</h2>
        <p>${person.description}</p>
        <p>${person.extract}</p>
      `;
    } else {
      section.innerHTML = `
        <img src="img/profile.jpg" alt="ocean clouds seen from space">
        <h2>${person.title}</h2>
        <p>Results unavailable for ${person.title}</p>
        ${person.extract_html}
      `;
    }
  });
}
Promise.all()

Below is another way you might define a list of promises, and execute other tasks when they are all resolved:

const func1 = getJSON('...');
const func2 = getJSON('...');

Promise.all([func1, func2])
  .then(results => {
    console.log('Array of results', results);
  })
  .catch(error => {
    console.error(error);
  })

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    We are getting an array of multiple resolved Promise objects 0:00
    back from the getProfiles function. 0:04
    What we need is a single resolved promise we can then pass to generate HTML. 0:06
    And its value should be an array containing the Wikipedia 0:11
    profiles as objects. 0:14
    JavaScript promises provide an efficient way to fire off and 0:15
    keep track of multiple asynchronous operations with the Promise.all method. 0:18
    Promise.all is useful when your program needs to wait for 0:23
    more than one promise to resolve. 0:26
    The getProfiles function returns the array of promise object assigned to 0:27
    the variable profiles which get created by the map method. 0:32
    So instead of returning just the variable profiles, 0:36
    let's have getProfiles return Promise.all. 0:41
    Pormise.all accepts an iterable such as a string or an array, 0:45
    you'll usually pass it an array of promises. 0:48
    So let's pass it the array stored in the variable profiles. 0:51
    Over in the browser, I'll refresh and click the view button. 0:55
    And great, there is an array containing all the profile objects. 0:58
    Promise.all is going to wait on all of the individual promise objects then joins 1:02
    them into one and returns a value when all the specified promises are fulfilled. 1:07
    In fact, I'll quickly console.log(Promise.all(profiles)). 1:12
    And over in the console, we see one Promise object, whose status is resolved. 1:22
    And as the PromiseValue, we have the array of profile objects. 1:27
    The array of results is always in the same order as the list of promises passed to 1:31
    Promise.all. 1:36
    In this case, the order in which the map method returns all the objects. 1:37
    All right, now that we're getting the JSON data back from Wikipedia, 1:46
    let's replace the in-line error function and 1:51
    the second then method with a reference to the function generateHTML amount. 1:55
    Next, since generateHTML now receives and 2:01
    array of objects as data, we need to make a change to the function. 2:04
    The function now needs to iterate over the array of objects and 2:09
    create HTML for each object in the array. 2:14
    For this, I would use the map array iteration method with data.map. 2:17
    In the map callback, 2:24
    I'll use the parameter person to represent each person object. 2:26
    Then I'll wrap the body of the function inside the map callback. 2:31
    And now we need to change the property names from 2:39
    data.propertyname to person.propertyname. 2:42
    All right, let's have a look in the browser. 2:49
    Refresh, click View. 2:52
    And now the list of people in space is fully displayed in the browser, great. 2:55
    Keep in mind that Promise.all is an all or nothing operation. 3:04
    That means that it's going to reject as soon as any of 3:09
    the promises passed to it fail. 3:12
    For instance, if for some reason the second Ajax requests to 3:14
    the Wikipedia API fails, it's going to activate the catch method down here. 3:18
    Now even though there's no issue with the first, third or any other request, 3:23
    Promise.all rejects the entire promise. 3:28
    So either all of the promises succeed or none of them do. 3:31

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up