Notes to Master Promise Methods in JavaScript: all(), allSettled(), race() and any()

Understanding promises static methods is very important for handling promises in different scenarios, especially in API calls. This concept is very important to understand for javascript and machine coding interview rounds

Promise Static Methods

Quick Summary

1. Promise.all() - Run promises in parallel, and return all fulfilled responses If anyone fails, the whole result fails with an error.
2. Promise.allSettled() - Run promises in parallel, return all settled response (either fulfilled or rejected)
3. Promise.race() - Run promises in parallel, return first settled response (either fulfilled or rejected )
4. Promise.any() - Run promises in parallel, return the first fulfilled response if all rejected return AggregateError object with all the rejected errors as part of the errors object

Understand Promise Methods in Depth

Let's cover the promise methods and their use-cases one by one to understand these promise methods using code implementations.

1. Promise.all()

It returns an array of results in case all the promises got `resolved`, in case of any failure it returns the error immediately and other promises are ignored.

Promise.all([promises]) used to call promises in parallel.

Here are the different use cases with examples:

1. When an iterator contains one or more resolved promises then Promise.all returns a promise Asynchronously,
   

   let p = Promise.all([10, Promise.resolve(30), 40]);
   p.then((values) => console.log(values)) // log: [10, 30, 40]

2. If an Empty Iterable is passed - then the promise returned by this method is fulfilled synchronously. The resolved value is an empty array.
   

   // Synchronously return resolved promise
   let p = Promise.all([])
   p.then((value) => console.log(value)) // log: []
   
   // Asynchronously return resolved promise in case all non-promise iterators
   let p = Promise.all([10, 20, 30])
   p.then((value) => console.log(value)) // log: [10, 20, 30]

3. If a "Nonempty Iterable" is passed, and all of the promises are fulfilled or are not promises, then the promise returned by this method is fulfilled asynchronously.
   

   let p = Promise.all([ Promise.resolve(44), 55, 66])
   p.then((value) => console.log(value)) // log: [44, 55, 66]

4. If Iterable contains a rejected promise, then returns a promise which failed at the first rejection and returns an error with the rejection callback.
   

   // Return first rejected promise if there is any rejection
   let p = Promise.all([
   	Promise.resolve(10),
   	Promise.reject('first reject'),
   	Promise.reject('second reject')
   ])
   
   p.then(null, (err) => {
   	console.log(err) // Log: 'first reject'
   })
   // or
   p.catch((err) => {
   	console.log(err) // Log: 'first reject'
   })

2. Promise.allSettled (<iterable>)

Promise.allSettled just waits for all promises to settle, regardless of the result. The resulting array has

• { status: "fulfilled", value: result } for successful responses
• {status: "rejected", reason: error} for errors.

Example:

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/remy',
  'https://no-such-url'
];

Promise.allSettled(urls.map( async url => await fetch(url)))
  .then(results => {
    results.forEach((result, num) => {
			// Fulfilled results
      if (result.status == "fulfilled") {
        alert(`${urls[num]}: ${result.value.status}`);
      }
			// Rejected results
      if (result.status == "rejected") {
        alert(`${urls[num]}: ${result.reason}`);
      }
    });
  });

3. Promise.race(<iterable>)

It works similarly Promise.all but waits only for the first settled promise and gets its result (or error).

Example:

// First fulfilled
Promise.race([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")),2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1

// First rejected
Promise.race([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 5000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert)
.catch(alert) // Whoops!

4. Promise.any(<iterable>)

Similar to Promise.race, but waits only for the first fulfilled promise and gets its result.

If all of the given promises are rejected, then the returned promise is rejected with AggregateError – a special error object that stores all promise errors in its errors property.

Examples:

Case 1: Where the first promise got rejected, and the second promise got fulfilled successfully so the code returns the first fulfilled promise. It won't go to the 3rd promise.

Promise.any([
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")),1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)), // 1st fulfilled
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1

Case 2: In the case where all the promises got rejected and there is no fulfilled promise, Code returns a custom object AggregateError which contains error messages for all the rejected promises.

Promise.any([
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Ouch!")), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Error!")), 2000))
]).catch(error => {
  console.log(error.constructor.name); // AggregateError
  console.log(error.errors[0]); // Error: Ouch!
  console.log(error.errors[1]); // Error: Error!
});

Final Thoughts

The use of Promise Static methods is very common in real-world frontend development while fetching data using REST API calls. Now that you have understood the workings of Promise Static methods (Promise.all, Promise.allSettled, Promise.race, Promise.any), you can easily manage the success and failure scenarios very efficiently while calling APIs.