How do you handle multiple promises?

Handling multiple promises effectively is a crucial skill in modern JavaScript development, especially in frontend applications where asynchronous operations are common. When dealing with multiple promises, developers have several strategies at their disposal, including Promise.all, Promise.allSettled, Promise.race, and Promise.any. Each of these methods serves different use cases and understanding them can significantly improve the efficiency and readability of your code.

Understanding Promises

A promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises can be in one of three states: pending, fulfilled, or rejected. When working with multiple promises, it’s essential to understand how these states interact.

Using Promise.all

One of the most common methods for handling multiple promises is Promise.all. This method takes an iterable of promises and returns a single promise that resolves when all of the promises in the iterable have resolved or rejects with the reason of the first promise that rejects.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));
const promise3 = 42;

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // [3, "foo", 42]
  })
  .catch(error => {
    console.error('One of the promises failed:', error);
  });

Best Practices for Promise.all

• Use Promise.all when you need all promises to succeed. If any promise fails, the entire operation fails.
• Ensure that the promises are independent of each other to avoid unnecessary delays.
• Handle errors gracefully to avoid unhandled promise rejections.

Common Mistakes with Promise.all

• Assuming that the order of results in the resolved array corresponds to the order of promises passed in.
• Not handling rejections properly, which can lead to unhandled promise rejections.

Using Promise.allSettled

In scenarios where you want to wait for all promises to settle (either fulfilled or rejected), Promise.allSettled is the appropriate choice. This method returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describe the outcome of each promise.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promise3 = 42;

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach((result) => {
      if (result.status === 'fulfilled') {
        console.log('Result:', result.value);
      } else {
        console.error('Error:', result.reason);
      }
    });
  });

Best Practices for Promise.allSettled

• Use Promise.allSettled when you want to handle both successes and failures without failing the entire operation.
• Analyze the results to determine which promises succeeded and which failed.

Using Promise.race

Another useful method is Promise.race, which returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with its value or reason.

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'one'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 50, 'two'));

Promise.race([promise1, promise2])
  .then(value => {
    console.log(value); // "two"
  });

Best Practices for Promise.race

• Use Promise.race when you need the result of the first promise to settle, regardless of the others.
• Be cautious as it can lead to unexpected results if not properly managed.

Using Promise.any

Finally, Promise.any is a newer addition to the Promise API that takes an iterable of Promise objects and, as soon as one of the promises in the iterable fulfills, returns a single promise that resolves with the value from that promise. If no promises in the iterable fulfill (i.e., all of the given promises are rejected), then the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors.

const promise1 = Promise.reject('Error 1');
const promise2 = Promise.reject('Error 2');
const promise3 = Promise.resolve('Success!');

Promise.any([promise1, promise2, promise3])
  .then(value => {
    console.log(value); // "Success!"
  })
  .catch(error => {
    console.error('All promises were rejected:', error);
  });

Best Practices for Promise.any

• Use Promise.any when you want to get the first successful result from multiple promises.
• Be aware of the AggregateError for handling multiple rejections.

In conclusion, handling multiple promises in JavaScript requires a solid understanding of the available methods and their appropriate use cases. By leveraging Promise.all, Promise.allSettled, Promise.race, and Promise.any, developers can write cleaner, more efficient asynchronous code that is easier to maintain and debug.