The Difference Between Promise.all and Promise.race in JavaScript

William Le

The Promise object in JavaScript offers a few useful built-in methods, with Promise.all and Promise.race being two such methods. Even though these two methods both take arrays of promises as argument, there’s a big difference between Promise.all vs Promise.race.

Both of the Promise methods receive an array of promises, however, you’ll want to choose one over the other depending on what you need to accomplish.

  • Promise.all accepts an array of promises, and will attempt to fulfill all of them. Exits early if just 1 promise gets rejected.
  • Promise.race also accepts an array of promises, but returns the first promise that is settled. A settled promise can either be resolved or rejected.

Promise.all

The design purpose of Promise.all is to fulfill many promises. For example, when a user logs into a web app like Facebook, several network requests probably need to be made to populate the user’s personalized content:

const userContent = [
  new Promise(getFriendsList),
  new Promise(getGroups),
  new Promise(getLikedPages)
];

function initalizeUserContent() {
  Promise.all(userContent)  // 👈 gotta get em all!
    .then(displayHomepage)
    .catch(redirectLoginForm);
};

initalizeUserContent();

All those promises are vital to properly displaying the Facebook homepage to the user. If any of those promises are rejected it’ll be required to exit Promise.all early, and redirect to the login page.

Promise.race

This one is somewhat different. You still give it an array of promises, but it exits with the first settled promise.

Imagine if you’re developing software to purchase stocks on the NASDAQ exchange. You want to be able to submit purchases (called “buy orders”) to several stockbrokers, but you’re only going to honor the first stockbroker that fulfills your order.

const myStockBrokers = [
  eTrade,
  fidelity,
  interactiveBrokers,
  ameritrade,
  tradeStation,
  vanguard
];

function submitBuyOrder() {
  Promise.race(myStockBrokers)
    .then(updateMyPortfolio)
    .catch(cancelBuyOrder);
};

submitBuyOrder();

The method name Promise.race is befitting because it causes all of the promises to “race” against each other with only a single winner. 🏎️

Quizzes

Here’s 4 mini-quizzes to help reinforce what you learned! We’re using setTimeout to simulate our promises.

Promise.all()

All 4 of the promises are “resolved” successfully! What’s the return value?

const foo = [
  new Promise((resolve, reject) => setTimeout(resolve, 222, '🥝')),
  new Promise((resolve, reject) => setTimeout(resolve, 333, '🍓')),
  new Promise((resolve, reject) => setTimeout(resolve, 111, '🍍')),
  new Promise((resolve, reject) => setTimeout(resolve, 444, '🍇'))
];

Promise.all(foo)
  .then(console.log)
  .catch(console.log);

[ '🍍', '🥝', '🍏', '🍇' ]

Notice the values in the array are ordered based on when the promise was “resolved.”


Only 3 of the promises are “resolved” and 1 is “rejected.”

const foo = [
  new Promise((resolve, reject) => setTimeout(resolve, 222, '🥝')),
  new Promise((resolve, reject) => setTimeout(reject, 333, '🍏')),
  new Promise((resolve, reject) => setTimeout(resolve, 111, '🍍')),
  new Promise((resolve, reject) => setTimeout(resolve, 444, '🍇'))
];

Promise.all(foo)
  .then(console.log)
  .catch(console.log);

'🍏' // note: it's a "string" not an array

It only takes one bad apple to exit from Promise.all!

Promise.race()

If the first promise that’s settled is “rejected” what’s the result?

const foo = [
  new Promise((resolve, reject) => setTimeout(resolve, 222, '🥝')),
  new Promise((resolve, reject) => setTimeout(resolve, 333, '🍏')),
  new Promise((resolve, reject) => setTimeout(reject, 111, '🍍')),
  new Promise((resolve, reject) => setTimeout(resolve, 444, '🍇'))
];

Promise.race(foo)
  .then(console.log)
  .catch(console.log);

'🍍'

Promise.race always returns the results of the 1st settled promise regardless of whether it’s resolved or rejected.


One promise will get “rejected.” What’s the result?

const foo = [
  new Promise((resolve, reject) => setTimeout(resolve, 222, '🥝')),
  new Promise((resolve, reject) => setTimeout(reject, 333, '🍏')),
  new Promise((resolve, reject) => setTimeout(resolve, 111, '🍍')),
  new Promise((resolve, reject) => setTimeout(resolve, 444, '🍇'))
];

Promise.race(foo)
  .then(console.log)
  .catch(console.log);

'🍍'

Rule of Thumb 👍

These 2 Promise methods serve different purposes even if they’re both designed to work with arrays of promises. A helpful tip is to think about the returned value that you want. Do you want an array of promise results? Or, do you simply want the results of the first settled promise?

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#