Master Concurrent JavaScript: Replace Promise.all with Promise.allSettled

Handling asynchronous operations is a core part of everyday JavaScript coding. As applications grow, developers often need to run several async tasks concurrently and process their results. Historically, Promise.all() has been the go‑to method for concurrent promises, but it has a fatal flaw: if any promise is rejected, the entire operation fails.

Limitations of Promise.all

Recall how Promise.all() works and its shortcomings:

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);
    // we don't know which succeeded or failed
  });

The main problems with this approach are:

Any single rejected promise causes the whole batch to fail.

You cannot tell which operations succeeded and which failed.

You cannot retrieve the results of the successful operations.

In real applications we often want to continue processing the successful results even when some requests fail. For example, when loading dashboard widgets, a failure in one widget's data fetch should not prevent the other widgets from displaying.

Introducing Promise.allSettled

Promise.allSettled()

solves all of the above issues. It waits for every promise to settle (either fulfilled or rejected) and returns an array containing the outcome 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);
      }
    });

    // Collect only the successful values
    const successfulData = results
      .filter(result => result.status === 'fulfilled')
      .map(result => result.value);

    // Process the successful data
    processData(successfulData);
  });

Promise.allSettled Return Value Structure

The return value of Promise.allSettled() is an array where each element corresponds to a promise and has the following shape:

For a fulfilled promise: { status: 'fulfilled', value: <em>result value</em> } For a rejected promise: { status: 'rejected', reason: <em>error reason</em> } This uniform structure makes handling results straightforward. In scenarios where multiple independent async operations must run concurrently and the application needs a complete picture of successes and failures, Promise.allSettled() is the optimal choice. It enables developers to build more resilient applications that gracefully handle inevitable errors and exceptions.