DEV Community

Cover image for JavaScript Promises: Promise.all and Promise.allSettled
Ashish Patel
Ashish Patel

Posted on • Edited on

JavaScript Promises: Promise.all and Promise.allSettled

In JavaScript, promises are a way to handle asynchronous operations and provide a more elegant way to handle callbacks. One of the challenges of working with promises is handling multiple promises at once. To address this, JavaScript provides two methods, Promise.all and Promise.allSettled, which allows you to work with multiple promises in an efficient way. These methods provide different ways to handle multiple promises, and in this blog, we will discuss the differences between the two and when to use each one. With this understanding, you will be able to choose the right method for your specific use case and improve your code's readability and maintainability.

The Promise.all Method

  • How Promise.all handles a group of promises: Promise.all is used to handle a group of promises and wait for them all to complete before executing a callback function. It returns a single promise that is fulfilled with an array of the fulfilled values of the input promises, in the same order as the input promises. If any of the input promises are rejected, the returned promise is also rejected.

  • When to use Promise.all: Use Promise.all when you need to wait for multiple promises to complete before performing a specific action. It is useful when the order of the promises is important and you need the result of all promises to perform the next action.

Example of using Promise.all:

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]
      });
Enter fullscreen mode Exit fullscreen mode

The Promise.allSettled Method

  • How Promise.allSettled handles a group of promises: Promise.allSettled is used to handle a group of promises and wait for them all to settle (either fulfilled or rejected) before executing a callback function. It returns a single promise fulfilled with an array of objects, each describing the outcome of one of the input promises.

  • When to use Promise.allSettled: Use Promise.allSettled when you want to handle both fulfilled and rejected promises in the same way, without waiting for all the promises to be complete. It's useful when you don't care about the order of the promises and you want to handle the outcome of each promise in the same way.

Example of using Promise.allSettled:

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

    Promise.allSettled([promise1, promise2, promise3])
      .then(values => {
        console.log(values);
        /*
        [
          { status: 'fulfilled', value: 1 },
          { status: 'rejected', reason: Error: error },
          { status: 'fulfilled', value: 3 }
        ]
        */
      });
Enter fullscreen mode Exit fullscreen mode

Comparing Promise.all and Promise.allSettled

  • Promise.all waits for all promises to complete and return an array of values in the same order as input promises, it also rejects if any promise is rejected. Promise.allSettled waits for all promises to settle and return an array of objects, each describing the outcome of one of the input promises, regardless of whether they were fulfilled or rejected.
  • Pros and cons of each method: Promise.all is useful when you need the order of the promises and the result of all promises to perform the next action, but if any promise is rejected it will reject the whole chain. Promise.allSettled is useful when you

In conclusion, Promise.all is useful when you want to wait for all promises to complete and need the results of all promises to perform the next action. Whereas Promise.allSettled is useful when you want to handle both fulfilled and rejected promises in the same way, without waiting for all the promises to complete.

Top comments (0)