Which Promise Wins? Exploring JavaScript’s Promise.any() for Faster Asynchronous Success!

JavaScript is a versatile programming language that continues to evolve with each new version, introducing features and functionalities that enhance developers’ capabilities.

One such feature introduced in ECMAScript 2021 is Promise.any(). This method provides a more flexible approach to handling promises, allowing developers to work with a collection of promises and resolving as soon as any one of them fulfills.

Understanding Promises

Before delving into Promise.any(), it's crucial to have a solid understanding of promises in JavaScript.

Promises are a way to handle asynchronous operations, providing a cleaner and more structured way to work with asynchronous code compared to traditional callback patterns.

A promise represents the eventual completion or failure of an asynchronous operation and has three states:

1. Pending: The initial state; the promise is neither fulfilled nor rejected.
2. Fulfilled: The operation completed successfully, and the promise has a resulting value.
3. Rejected: The operation failed, and the promise has a reason for the failure.

Developers commonly use promises when working with tasks like fetching data from an API, reading files, or executing other time-consuming operations.

Introducing Promise.any()

The Promise.any() method is a recent addition to the JavaScript language, aiming to simplify the handling of multiple promises.

It takes an iterable of promises as its parameter and returns a single promise that is fulfilled with the value of the first promise in the iterable to be fulfilled.

If all promises are rejected, it returns a single rejected promise with an AggregateError containing all the rejection reasons.

Here’s a basic syntax example:

Promise.any(iterable);

Here, iterable is an iterable object, such as an array, containing the promises to be observed.

[embed]Ever Wondered How JavaScript’s Promise.all Supercharges Your Code? 🚀 Asynchronous programming is a fundamental aspect of modern web development, allowing developers to execute non-blocking…medium.com

Real-world Use Cases

1. Race Conditions

One of the primary use cases for Promise.any() is handling race conditions. In scenarios where you have multiple asynchronous operations, and you're interested in the first one to complete, Promise.any() proves to be a concise and effective solution.

const promise1 = fetch('/api/data1');
const promise2 = fetch('/api/data2');
const promise3 = fetch('/api/data3');

Promise.any([promise1, promise2, promise3])
  .then((firstResult) => {
    console.log('The first promise that fulfilled:', firstResult);
  })
  .catch((error) => {
    console.error('All promises were rejected:', error);
  });

In this example, the first promise (either promise1, promise2, or promise3) that fulfills will trigger the then block, logging the result. If all promises are rejected, the catch block will handle the situation.

2. Efficient Resource Loading

Consider a scenario where you’re loading resources from multiple sources, such as images from different servers.

You want to display the first successfully loaded image without waiting for all requests to complete.

const loadImage = (url) =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(url);
    img.onerror = () => reject(new Error(`Failed to load image from ${url}`));
    img.src = url;
  });

const imageUrls = ['/images/image1.jpg', '/images/image2.jpg', '/images/image3.jpg'];

Promise.any(imageUrls.map(loadImage))
  .then((firstLoadedImageUrl) => {
    console.log('The first image loaded successfully:', firstLoadedImageUrl);
  })
  .catch((error) => {
    console.error('All image loading attempts failed:', error);
  });

In this example, the loadImage function returns a promise that resolves when an image is successfully loaded and rejects if the loading fails.

The Promise.any() call ensures that the first successfully loaded image triggers the then block.

Conclusion

Promise.any() is a valuable addition to the JavaScript language, providing a concise and efficient way to handle multiple promises.

Its ability to resolve with the value of the first fulfilled promise makes it particularly useful in scenarios where you're interested in the fastest result among asynchronous operations.

By leveraging Promise.any(), developers can write more expressive and readable asynchronous code, enhancing the overall quality of JavaScript applications.

Connect with me on Medium ✍ : https://medium.com/@Evelyn.Taylor

In Plain English 🚀

Thank you for being a part of the **In Plain English** community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: **X | [LinkedIn](https://www.linkedin.com/company/inplainenglish/) | [YouTube](https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw) | [Discord](https://discord.gg/in-plain-english-709094664682340443) | [Newsletter](https://newsletter.plainenglish.io/) | [Podcast](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0)**
• **Create a free AI-powered blog on Differ.**
• More content at **PlainEnglish.io**