JavaScript `Promise.allSettled()`: Handling Multiple Promises with Grace

In modern JavaScript development, managing multiple asynchronous operations efficiently is crucial. The Promise.allSettled() method, introduced in ECMAScript 2020, provides a robust solution for handling multiple promises, offering a way to deal with all outcomes of promises without failing on the first rejected promise.

What is Promise.allSettled()?

The Promise.allSettled() method takes an iterable of promises and returns a single promise that resolves after all of the given promises have either resolved or rejected. It provides a way to handle the results of all promises, regardless of whether they succeeded or failed.

Syntax:

Promise.allSettled(iterable);

• iterable: An iterable object, such as an array, of promises to be settled.

Why Use Promise.allSettled()?

• Handles All Outcomes: Unlike Promise.all(), which rejects as soon as one promise fails, Promise.allSettled() ensures that you can handle the outcome of every promise, making it ideal for situations where you need to know the status of each promise.
• Improves Reliability: It helps in scenarios where you need to aggregate results from multiple sources and where some operations might fail while others succeed.
• Simplifies Error Handling: Provides a straightforward way to process both resolved and rejected promises without having to deal with individual try-catch blocks.

How to Use Promise.allSettled()

1. Basic Usage

The Promise.allSettled() method returns a promise that resolves to an array of objects representing the outcome of each promise:

const promise1 = Promise.resolve('Success');
const promise2 = Promise.reject('Error');
const promise3 = Promise.resolve('Another success');

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
    // Output:
    // [
    //   { status: 'fulfilled', value: 'Success' },
    //   { status: 'rejected', reason: 'Error' },
    //   { status: 'fulfilled', value: 'Another success' }
    // ]
  });

2. Handling Results and Errors

You can use the results to handle both fulfilled and rejected promises:

const fetchData1 = fetch('https://api.example.com/data1');
const fetchData2 = fetch('https://api.example.com/data2');
const fetchData3 = fetch('https://api.example.com/data3');

Promise.allSettled([fetchData1, fetchData2, fetchData3])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('Data:', result.value);
      } else {
        console.log('Error:', result.reason);
      }
    });
  });

3. Using with Async/Await

Combine Promise.allSettled() with async/await for a more readable and synchronous-like handling of asynchronous operations:

async function fetchAllData() {
  const fetchData1 = fetch('https://api.example.com/data1');
  const fetchData2 = fetch('https://api.example.com/data2');
  const fetchData3 = fetch('https://api.example.com/data3');

  const results = await Promise.allSettled([fetchData1, fetchData2, fetchData3]);

  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('Data:', result.value);
    } else {
      console.log('Error:', result.reason);
    }
  });
}

fetchAllData();

4. Example with Mixed Success and Failure

Illustrate a scenario where some promises succeed and others fail:

const task1 = new Promise((resolve) => setTimeout(resolve, 100, 'Task 1 completed'));
const task2 = new Promise((_, reject) => setTimeout(reject, 200, 'Task 2 failed'));
const task3 = new Promise((resolve) => setTimeout(resolve, 300, 'Task 3 completed'));

Promise.allSettled([task1, task2, task3])
  .then(results => {
    console.log(results);
    // Output:
    // [
    //   { status: 'fulfilled', value: 'Task 1 completed' },
    //   { status: 'rejected', reason: 'Task 2 failed' },
    //   { status: 'fulfilled', value: 'Task 3 completed' }
    // ]
  });

Comparison with Other Promise Methods

• Promise.all(): Resolves when all promises have resolved or rejects if any promise fails. It’s suitable when you need all promises to succeed.

  Promise.all([promise1, promise2, promise3])
    .then(values => { ... }) // Resolves only if all promises succeed
    .catch(error => { ... }); // Catches the first rejection
  

• Promise.any(): Resolves as soon as one promise resolves successfully. It rejects if all promises are rejected.

  Promise.any([promise1, promise2, promise3])
    .then(value => { ... }) // Resolves with the first fulfilled promise
    .catch(error => { ... }); // Rejects if all promises are rejected
  

• Promise.race(): Resolves or rejects as soon as the first promise in the iterable resolves or rejects.

  Promise.race([promise1, promise2, promise3])
    .then(value => { ... }) // Resolves or rejects with the first settled promise
  

Browser Compatibility

Promise.allSettled() is widely supported in modern browsers and Node.js versions. Ensure compatibility with older environments if needed, as it may not be available in legacy systems.

Conclusion

The Promise.allSettled() method is a powerful addition to JavaScript, enabling developers to handle multiple asynchronous operations with greater flexibility and clarity. By processing the results of all promises, whether fulfilled or rejected, it simplifies error handling and improves code reliability.