Javascript Series: Advanced Promises APIs

Promises are a cornerstone of asynchronous programming in JavaScript, providing an elegant and structured way to handle asynchronous operations. While the basic promise functionality is powerful on its own, JavaScript offers a rich set of Promise APIs that bring advanced features to the table. In this comprehensive guide, we will delve into four essential Promise APIs: Promise.all, Promise.allSettled, Promise.race, and Promise.any.

1. Promise.all

The Promise.all method allows you to handle multiple promises concurrently and wait for all of them to fulfill (resolve). It takes an iterable of promises as input and returns a new promise. This new promise resolves with an array containing the fulfillment values of all the input promises, in the same order.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

Promise.all([promise1, promise2, promise3])
  .then((responses) => {
    // Process the responses from all promises
    responses.forEach((response) => {
      console.log(response.data);
    });
  })
  .catch((error) => {
    console.error(error);
  });

2. Promise.allSettled

The Promise.allSettled method allows you to handle multiple promises concurrently and wait for all of them to settle, regardless of whether they fulfill or reject. It takes an iterable of promises as input and returns a new promise. This new promise resolves with an array of objects representing the fulfillment or rejection status of each input promise.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

Promise.allSettled([promise1, promise2, promise3])
  .then((results) => {
    // Process the results of all promises
    results.forEach((result) => {
      if (result.status === 'fulfilled') {
        console.log(result.value.data);
      } else if (result.status === 'rejected') {
        console.error(result.reason);
      }
    });
  });

3. Promise.race

The Promise.race method allows you to race multiple promises and wait for the first one to fulfill or reject. It takes an iterable of promises as input and returns a new promise. This new promise resolves or rejects with the value or reason of the first settled promise.

const promise1 = new Promise((resolve) => setTimeout(resolve, 2000, 'Resolved 1'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, 'Resolved 2'));
const promise3 = new Promise((reject) => setTimeout(reject, 3000, 'Rejected 3'));

Promise.race([promise1, promise2, promise3])
  .then((value) => {
    console.log(`Winner: ${value}`);
  })
  .catch((reason) => {
    console.log(`First promise to settle: ${reason}`);
  });

4. Promise.any

The Promise.any method allows you to race multiple promises and wait for the first one to fulfill. Unlike Promise.race, it only considers fulfillment, not rejection. It takes an iterable of promises as input and returns a new promise. This new promise resolves with the fulfillment value of the first fulfilled promise.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

Promise.any([promise1, promise2, promise3])
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

Conclusion

By mastering these advanced Promise APIs, you have expanded your toolkit for handling asynchronous operations in JavaScript. Promise.all allows you to handle multiple promises concurrently, Promise.allSettled provides insights into the status of each promise, Promise.race allows you to race promises and respond to the first settled one, and Promise.any focuses on the first fulfilled promise.

These APIs bring flexibility, control, and efficiency to your asynchronous code, enabling you to build more robust and performant applications. So go ahead, experiment with these Promise APIs, and elevate your asynchronous programming skills in JavaScript. Happy coding!