Wait Until All Promises Complete Even If Some Rejected

When working with asynchronous programming in JavaScript, handling promises is essential. However, it can get a little tricky when you need to wait for all promises to complete, even if some of them are rejected. In this guide, we will explore how you can achieve this in your code effectively.

One common approach to waiting for multiple promises to complete is by using `Promise.all()`. This method allows you to pass an array of promises and returns a new promise that resolves when all of the input promises have resolved successfully. However, if any of the promises are rejected, `Promise.all()` will short-circuit and immediately reject the new promise it returns.

So, how can you ensure that you wait for all promises to complete, even if some of them are rejected? One solution is to wrap each promise with a `catch` block to prevent the rejection from bubbling up. By doing this, you can ensure that the `Promise.all()` call will wait for all promises to settle, regardless of their individual outcomes.

Here's an example demonstrating this approach:

Javascript

const promises = [
  fetch('https://api.example.com/data1').catch(error =&gt; error),
  fetch('https://api.example.com/data2').catch(error =&gt; error),
  fetch('https://api.example.com/data3').catch(error =&gt; error),
];

Promise.all(promises)
  .then(results =&gt; {
    // Handle successful responses here
    console.log('All promises resolved:', results);
  })
  .catch(errors =&gt; {
    // Handle errors or rejected promises here
    console.error('Some promises were rejected:', errors);
  });

In this code snippet, we wrap each `fetch` call with a `catch` block to ensure that any rejections are caught. Then, we pass the array of promises to `Promise.all()` and handle the results accordingly in the `then` and `catch` blocks.

Another approach is to use the `Promise.allSettled()` method, introduced in ES2020. This method returns a promise that resolves after all the input promises have settled, whether they were fulfilled or rejected. This means that you can process all the results, including any rejection reasons.

Here's how you can use `Promise.allSettled()`:

Javascript

const promises = [
  fetch('https://api.example.com/data1'),
  fetch('https://api.example.com/data2'),
  fetch('https://api.example.com/data3'),
];

Promise.allSettled(promises)
  .then(results =&gt; {
    // Handle all promises, including rejections
    console.log('All promises settled:', results);
  });

By using `Promise.allSettled()`, you can have more granular control over the outcomes of each promise, allowing you to handle both successful and failed promises in a single place.

In conclusion, waiting for all promises to complete, even if some are rejected, is a common scenario in asynchronous JS programming. By utilizing techniques like wrapping promises with `catch` blocks or using `Promise.allSettled()`, you can effectively manage multiple asynchronous operations in your code with confidence.

Related posts:

Contact Info