coderanx
user level

articles

JavaScript Promise.all, Promise.race and Promise.allSettled

The next methods will help you handle several Promises at the same time.

Promise.all

  • The Promise.all will create multiple Promises at the same time and wait until all are resolved or one is rejected.
  • The order of the results is the same as the promises. The time each promise takes doesn't affect the results order.
  • If you put values on the array that are not Promises, they will be part of the resulting array.
Promise.all([
  new Promise((resolve) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve) => setTimeout(() => resolve(2), 1000)),
]).then(console.log);
// It shows [1, 2] in the console

Promise.all([
  new Promise((resolve) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve) => setTimeout(() => resolve(2), 1000)),
  new Promise((_, rej) => setTimeout(() => rej('boom'), 1500)),
]).catch(console.log);
// It shows "boom" in the console

Promise.all([
  new Promise((resolve) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve) => setTimeout(() => resolve(2), 1000)),
  3,
  (() => 4)(), // IIFE
]).then(console.log);
// It shows [1, 2, 3, 4] in the console

Promise.race

The Promise.race waits for the first settled Promise and returns the result.

Promise.race([
  new Promise((res) => setTimeout(() => res('turtle'), 1000)),
  new Promise((res) => setTimeout(() => res('rabbit'), 2000)),
]).then(console.log);
// It shows "turtle"

Promise.race([
  new Promise((res) => setTimeout(() => res('rabbit'), 2000)),
  new Promise((reject) => reject('turtle')),
])
  .then(console.log)
  .catch(console.log);
// It shows "turtle". Immediately.

Promise.allSettled

The Promise.allSettled waits for all the promises to be settled (i.e. fulfilled or rejected). Contrary to the other methods, Promise.allSettled exposes the status of each promise.

Promise.allSettled([
  new Promise((resolve) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) =>
    setTimeout(() => reject(new Error('boom')), 1500)
  ),
])
  .then(console.log)
  .catch((e) =>
    console.log("i don't catch errors because they go to the array")
  );
// result:
// [
//  {status: "fulfilled", value: 1},
//  {status: "fulfilled", value: 2},
//  {status: "rejected", value: Error: boom at....},
// ]

Questions

What's the output?

Promise.all([
  new Promise((resolve) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve) => setTimeout(() => resolve(2), 1000)),
]).then(console.log);

What's the output?

const p1 = new Promise((resolve) => {
  setTimeout(() => resolve(1), 2000);
});
const p2 = new Promise((_, rej) =>
  setTimeout(() => rej(new Error('boom')), 1000)
);

Promise.all([p1, p2]).catch((e) => console.log(e.message));

What's the output?

Promise.all([
  new Promise((resolve) => setTimeout(() => resolve(1), 2000)),
  3,
  (() => 4)(), // IIFE
]).then(console.log);

What's the output?

Promise.race([
  new Promise((res) => setTimeout(() => res('fast'), 1000)),
  new Promise((res) => setTimeout(() => res('slow'), 2000)),
]).then(console.log);

What's the output?

Promise.race([
  new Promise((res) => setTimeout(() => res('slow'), 2000)),
  Promise.reject('fast'),
])
  .then(console.log)
  .catch(console.log);

What's the output?

Promise.race([
  new Promise((res) => setTimeout(() => res('slow'), 2000)),
  Promise.resolve(1),
  Promise.resolve(2),
]).then(console.log);

What's the output?

Promise.allSettled([
  new Promise((resolve) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => reject(new Error('boom'), 1500)),
]).then(console.log);

What's the output?

Promise.allSettled([Promise.reject(new Error('boom'))])
  .then(console.log)
  .catch((e) => console.log('error on catch'));