Why Promise.allFails and How Promise.allSettled Solves It

Handling asynchronous operations has become a core part of JavaScript coding. As applications grow in complexity, we often need to execute multiple async tasks concurrently and handle their results. For a long time, Promise.all() has been the preferred method for handling concurrent promises, but it has a fatal flaw: if any promise is rejected, the entire operation fails.

Limitations of Promise.all

Let's review how Promise.all() works and its limitations:

const promises = [
  fetch('/api/users'),
  fetch('/api/products'),
  fetch('/api/orders')
];

Promise.all(promises)
  .then(results => {
    // handle all successful results
    const [users, products, orders] = results;
    // further processing
  })
  .catch(error => {
    // if any promise fails, this runs
    console.error('At least one request failed:', error);
    // but we don't know which succeeded or failed
  });

The main problems with this approach are:

Any rejected promise causes the whole operation to fail.

You cannot tell which operations succeeded and which failed.

You cannot retrieve the results of successful operations.

In real applications we often want to continue processing the successful results even if some operations fail. For example, when loading dashboard components, we may still want to display other components if one component's data request fails.

The Promise.allSettled() method solves all of these issues. It waits for all promises to settle (whether fulfilled or rejected) and returns an array containing the result of each promise:

const promises = [
  fetch('/api/users').then(r => r.json()),
  fetch('/api/products').then(r => r.json()),
  fetch('/api/orders').then(r => r.json())
];

Promise.allSettled(promises)
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Promise ${index} succeeded:`, result.value);
      } else {
        console.log(`Promise ${index} failed:`, result.reason);
      }
    });
    // You can handle all successful results while knowing which failed
    const successfulData = results
      .filter(result => result.status === 'fulfilled')
      .map(result => result.value);
    // Process the successfully fetched data
    processData(successfulData);
  });

Structure of Promise.allSettled Return Value

The return value of Promise.allSettled() is an array where each element corresponds to a promise's result, with the following structure:

For a fulfilled promise: { status: 'fulfilled', value: <result> } For a rejected promise: { status: 'rejected', reason: <error> } This uniform structure makes handling results straightforward. Especially in scenarios where multiple independent async operations need to run concurrently and you want to obtain a complete set of results regardless of individual successes or failures, Promise.allSettled() is the optimal choice. It enables building more resilient applications that gracefully handle inevitable errors and exceptions.