Understanding JavaScript Promises: Promise.all vs. Promise.allSettled

In JavaScript, promises provide a powerful way to handle asynchronous operations. When working with multiple promises, JavaScript offers two useful methods to manage them in parallel: Promise.all() and Promise.allSettled(). While both methods allow you to execute promises concurrently, they differ significantly in their handling of resolved and rejected promises. Let’s dive into each method, their behavior, and the scenarios where you might use one over the other.

What is a Promise?

A Promise in JavaScript is an object that represents a value that may be available now, in the future, or never. Promises have three states:

• Pending: The initial state, neither fulfilled nor rejected.
• Fulfilled: The operation completed successfully.
• Rejected: The operation failed.

Using Promise.all()

Promise.all() is a method that takes an array (or iterable) of promises and returns a single promise. This returned promise fulfills when all the promises in the array fulfill, and rejects if any promise in the array rejects.

Key Characteristics of Promise.all()

1. Parallel Execution: All promises in the array are initiated in parallel.
2. Resolution: The Promise.all() method waits for all promises to resolve successfully. The returned promise will resolve with an array containing the results of each promise in the same order they were passed in.
3. Rejection: If any promise in the array rejects, Promise.all() immediately rejects, stopping the resolution of the remaining promises.
4. Execution Time: The overall time for Promise.all() to resolve is determined by the slowest promise in the array, as it must wait for all promises to settle.

Example Code with Promise.all()

const promise1 = new Promise((resolve) => setTimeout(() => resolve('Promise 1 resolved'), 1000));
const promise2 = new Promise((resolve, reject) => setTimeout(() => reject('Promise 2 rejected'), 500));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('Promise 3 resolved'), 2000));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log('All promises resolved:', results);
  })
  .catch((error) => {
    console.error('One of the promises rejected:', error);
  });        

In this example, promise2 rejects after 500 milliseconds. Because of this rejection, Promise.all() immediately rejects with an error, and the other promises are effectively ignored, regardless of their potential resolutions.

Pros and Cons of Promise.all()

• Pros: Useful when you need all promises to complete successfully to proceed with a task.
• Cons: If any promise rejects, Promise.all() stops all remaining work, potentially causing issues if partial results are acceptable.

Using Promise.allSettled()

Promise.allSettled() is a method introduced in ES2020. Like Promise.all(), it accepts an array of promises and returns a new promise. However, Promise.allSettled() resolves only after all promises have either resolved or rejected. It does not reject upon encountering a rejected promise, unlike Promise.all().

Key Characteristics of Promise.allSettled()

1. Parallel Execution: Like Promise.all(), all promises run concurrently.
2. Resolution Behavior: The returned promise from Promise.allSettled() resolves once all the input promises settle, regardless of whether they were resolved or rejected.
3. Results: Instead of an array of values, it returns an array of objects, where each object provides the status (fulfilled or rejected) and value (or reason for rejection) for each promise.
4. Ideal Use Case: This method is beneficial when you need all promises to complete, even if some fail, and handle the results accordingly.

Example Code with Promise.allSettled()

const promiseA = new Promise((resolve) => setTimeout(() => resolve('Promise A resolved'), 1000));
const promiseB = new Promise((resolve, reject) => setTimeout(() => reject('Promise B rejected'), 500));
const promiseC = new Promise((resolve) => setTimeout(() => resolve('Promise C resolved'), 2000));

Promise.allSettled([promiseA, promiseB, promiseC])
  .then((results) => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Promise ${index + 1} resolved with value:`, result.value);
      } else {
        console.log(`Promise ${index + 1} rejected with reason:`, result.reason);
      }
    });
  });        

In this case, Promise.allSettled() waits for all promises to settle. The result is an array with details about each promise's status and value or reason for rejection, allowing us to handle each outcome individually.

Pros and Cons of Promise.allSettled()

• Pros: Provides a comprehensive view of all promise outcomes without rejecting upon encountering an error, making it useful for tasks that don’t require every promise to succeed.
• Cons: It may require additional logic to handle both resolved and rejected states individually.

When to Use Each

• Use Promise.all() when:
• All promises must succeed for the task to proceed.
• You need the results only if everything completes without errors. Use Promise.allSettled() when:

• You need the status of each promise to handle both success and failure cases.
• Partial completion is acceptable, and failed promises should not halt the entire process.

Conclusion

Promise.all() and Promise.allSettled() both offer robust solutions for managing asynchronous operations, each suited to different scenarios. Promise.all() is ideal when a failure should cancel the operation, while Promise.allSettled() provides a more fault-tolerant approach, allowing all tasks to complete and then handle both successes and errors. Understanding these differences empowers developers to create more flexible, reliable code, and to select the best tool for their specific asynchronous needs.