Promise.all Vs Promise.allSettled.

Image by master1305 on Freepik

In modern web development, Promises have become an essential part of JavaScript programming. They are used to handle asynchronous operations in a more intuitive and organized way. Promises provide a way to manage the order of execution of asynchronous code, which allows developers to avoid callback hell and make code more maintainable.

One of the most useful Promise methods is Promise.all, which allows you to run multiple Promises in parallel and get their results when all of them have completed. However, this method has a limitation, which is that if any of the Promises fail, the entire Promise.all operation will fail and the error will be thrown.

In order to overcome this limitation, ECMAScript 2020 introduced a new Promise method called Promise.allSettled. This method is similar to Promise.all, but it doesn't fail if any of the Promises fail. Instead, it waits for all Promises to complete, whether they resolve or reject, and returns an array of results or errors.

Let’s explore these two Promise methods in more detail and see how they can be used in your JavaScript code.

Promise.all

The Promise.all method takes an array of Promises and returns a Promise that resolves to an array of values, in the same order as the original Promises. Here's an example:

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // [1, 2, 3]
  });

In this example, we create three Promises that resolve to the values 1, 2, and 3. We then pass these Promises to Promise.all, which returns a Promise that resolves to an array containing the resolved values of the original Promises.

If any of the Promises reject, Promise.all will immediately reject with the reason of the first rejected Promise. For example:

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('Error!');
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .catch(error => {
    console.log(error); // Error!
  });

In this example, the second Promise rejects with the error message “Error!”. Because of this, Promise.all immediately rejects with the same error message.

Promise.allSettled

The Promise.allSettled method takes an array of Promises and returns a Promise that resolves to an array of objects, each containing the status of the corresponding Promise (either "fulfilled" or "rejected") and its value or reason. Here's an example:

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('Error!');
const promise3 = Promise.resolve(3);

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
    // [
    //   { status: "fulfilled", value: 1 },
    //   { status: "rejected", reason: "Error!" },
    //   { status: "fulfilled", value: 3 }
    // ]
  });

In this example, we create the same Promises as in the previous example, but this time we use Promise.allSettled. The resulting Promise resolves to an array of objects, each containing the status of the corresponding Promise and its value or reason.

Because Promise.allSettled doesn't fail if any of the Promises fail, you can use it to handle multiple asynchronous operations in a more robust way. For example, if you’re working on an application that needs to fetch data from multiple APIs, you can use Promise.allSettled to fetch all the data and handle any errors that occur. Here's an example:

const api1 = fetch('https://api.example.com/data1');
const api2 = fetch('https://api.example.com/data2');
const api3 = fetch('https://api.example.com/data3');

Promise.allSettled([api1, api2, api3])
  .then(results => {
    const successfulResults = results.filter(result => result.status === 'fulfilled');
    const errors = results.filter(result => result.status === 'rejected');
    console.log(successfulResults);
    console.log(errors);
  });

In this example, we use fetch to fetch data from three APIs. We then pass the resulting Promises to Promise.allSettled, which resolves to an array of objects containing the status and value/reason of each Promise. We then use filter to separate the successful results from the errors.

Conclusion

In summary, Promise.all and Promise.allSettled are two useful Promise methods that can be used to handle multiple asynchronous operations in JavaScript. While Promise.all is useful when you need all Promises to succeed, Promise.allSettled is useful when you need to handle errors and continue with the rest of the Promises even if some fail. By understanding the differences between these two methods, you can choose the one that best fits your use case and write more robust and maintainable asynchronous code.