Mastering Async Error Handling with Promise.allSettled(): A Comprehensive Guide

In modern JavaScript development, managing multiple asynchronous operations is a frequent requirement. While handling these operations, errors and rejections can disrupt the flow if not managed gracefully. Enter Promise.allSettled(), a powerful utility to capture the outcome of every promise, whether it resolves or rejects. This method shines particularly when dealing with multiple promises, but did you know you can also leverage it with a single promise? Let’s explore this and more.

What is Promise.allSettled()?

Promise.allSettled() is a method introduced in ES2020 that waits for all promises in a given array to settle, regardless of whether they are resolved (fulfilled) or rejected. Unlike Promise.all(), which short-circuits on the first rejection, Promise.allSettled() ensures that you get the results of every promise. Each result includes a status (fulfilled or rejected) and the corresponding value or reason.

Here’s an example of handling multiple promises:

const tasks = [
  Promise.resolve("Task 1 completed"),
  Promise.reject("Task 2 failed"),
  Promise.resolve("Task 3 completed"),
];

Promise.allSettled(tasks).then(results => {
  results.forEach(result => {
    if (result.status === "fulfilled") {
      console.log("✅ Success:", result.value);
    } else {
      console.error("❌ Error:", result.reason);
    }
  });
});

Output:

✅ Success: Task 1 completed
❌ Error: Task 2 failed
✅ Success: Task 3 completed

Using Promise.allSettled() for a Single Promise

While designed for multiple promises, you can use Promise.allSettled() for a single promise by wrapping it in an array. This ensures consistent handling if your code alternates between single and multiple promises.

const task = Promise.reject("Something went wrong!");

Promise.allSettled([task]).then(([result]) => {
  if (result.status === "fulfilled") {
    console.log("✅ Fulfilled:", result.value);
  } else {
    console.error("❌ Rejected:", result.reason);
  }
});

This approach works but introduces unnecessary overhead for single promises. If you’re only handling one promise, stick with .then() and .catch(), which is more straightforward:

task
  .then(data => console.log("✅ Fulfilled:", data))
  .catch(err => console.error("❌ Rejected:", err));

Why Use Promise.allSettled()?

There are specific scenarios where Promise.allSettled() outshines alternatives like Promise.all() or sequential then()/catch() chains:

1. Batch Processing with Fault Tolerance

If you have multiple promises and need to ensure that all tasks are attempted even if some fail, Promise.allSettled() is perfect. For example, when fetching data from several APIs, one failing API shouldn’t stop the others.

const urls = ["url1", "url2", "url3"];
const requests = urls.map(url => fetch(url));

Promise.allSettled(requests).then(results => {
  results.forEach((result, index) => {
    if (result.status === "fulfilled") {
      console.log(`Data from ${urls[index]}:`, result.value);
    } else {
      console.error(`Error from ${urls[index]}:`, result.reason);
    }
  });
});

2. Collecting Successes and Failures Separately

By iterating over the results, you can segregate successes and failures into different arrays for easier processing.

const promises = [Promise.resolve(1), Promise.reject("Error"), Promise.resolve(3)];

Promise.allSettled(promises).then(results => {
  const successes = results.filter(r => r.status === "fulfilled").map(r => r.value);
  const errors = results.filter(r => r.status === "rejected").map(r => r.reason);

  console.log("✅ Successes:", successes);
  console.log("❌ Errors:", errors);
});

3. Unified Error Handling

When working with a mix of resolved and rejected promises, Promise.allSettled() simplifies error handling without stopping the execution midway.

Other Considerations and Tips

1. Understand the Overhead
   While Promise.allSettled() is great for collections, using it for a single promise might be overkill. Opt for .then()/.catch() where simplicity matters.
2. Fallback Mechanisms for Rejections
   Combine Promise.allSettled() with fallback logic. For example, retry failed promises or log their errors for debugging.

const tasks = [
  fetch("url1").catch(() => "Fallback data 1"),
  fetch("url2").catch(() => "Fallback data 2"),
];

Promise.allSettled(tasks).then(results => {
  results.forEach(result => {
    console.log(result.status === "fulfilled" ? result.value : "Using fallback");
  });
});

3. Async/Await Syntax
   You can still use Promise.allSettled() seamlessly with async/await for better readability:

const tasks = [fetch("url1"), fetch("url2")];

const results = await Promise.allSettled(tasks);
for (const result of results) {
  if (result.status === "fulfilled") {
    console.log("✅ Success:", result.value);
  } else {
    console.error("❌ Error:", result.reason);
  }
}

4. Performance Impact
   Avoid overusing Promise.allSettled() if the application doesn’t require capturing both resolved and rejected outcomes. Simpler alternatives might suffice for straightforward use cases.

Finally

Promise.allSettled() is a versatile method that excels at managing multiple asynchronous operations with comprehensive error handling. While it’s primarily designed for collections of promises, it can be adapted for single promises if necessary—though this isn’t its sweet spot.

When used correctly, it provides an elegant way to collect results, handle errors, and maintain the execution flow. Asynchronous programming can be tricky, but with tools like Promise.allSettled(), you can write robust, fault-tolerant JavaScript applications.

Remember: Promise.allSettled() lets you handle success and failure equally, without breaking a sweat!

Support Us