JavaScript Promise.any() Method: How to Handle Multiple Promises Taking the First Success and Ignoring Failures

JavaScript Promise.any() takes an array of promises and returns a single promise that resolves with the first fulfilled value. Unlike Promise.race(), which settles with the first promise regardless of success or failure, Promise.any() ignores rejections and waits for a successful result. If all promises reject, it returns an AggregateError containing all rejection reasons.

You can use this method when you need the first successful result from multiple sources, such as trying multiple APIs and using the fastest successful response, implementing failover mechanisms where a backup request kicks in if the primary one fails, or improving reliability by ensuring that at least one operation succeeds without waiting for all to complete.

This article is part of our Mastering Asynchronous JavaScript guide, which explores everything from fundamental concepts like callbacks, Promises, and async/await to advanced techniques such as concurrency control with Promise.all, Promise.race, and other powerful patterns. To learn more and improve your asynchronous programming skills, check out the full guide here.

Understanding Promise.any()

ECMAScript 2021 (ES12) introduced Promise.any() as the newest promise combinator methods. It accepts an array of promises and resolves as soon as one fulfills. This behavior sets it apart from other Promise combinators:

• Promise.all(): waits for all promises to fulfill, failing fast if any promise rejects. It’s like coordinating a team of workers on different tasks. Instead of waiting for each worker to finish before starting the next task, you can have everyone work simultaneously and come together when all tasks are complete.
• Promise.allSettled(): patiently waits for all promises to complete, regardless of whether they fulfill or reject. It’s similar to when you order multiple packages from different stores. Some arrive on time, some are delayed, and some might be lost. Instead of canceling everything if one package fails, you check the status of each and see which arrived, which are still in transit, and which failed.
• Promise.race(): resolves or rejects with the first settled promise, acting like a competition where the first to finish, whether successful or not, determines the outcome.

In contrast, Promise.any() continues searching for success even when encountering failures. Here’s a basic example that demonstrates this behavior:

const promise1 = Promise.reject("Error in promise 1");
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Success!"));
const promise3 = new Promise((resolve) => setTimeout(resolve, 200, "Another success"));

Promise.any([promise1, promise2, promise3])
  .then((result) => console.log(result)) // Outputs: "Success!"
  .catch((error) => console.log(error));

Even though promise1 fails, Promise.any() keeps going and resolves with the first successful result from promise2.

Each promise method serves a distinct purpose in handling multiple asynchronous operations. Use this comparison to choose the right method for your needs:

Real-World Applications of Promise.any()

Use Promise.any() when you need at least one operation to succeed, for example:

• Fetching from multiple sources – Try different APIs and use the first successful response.
• Failover strategies – Attempt multiple fallback operations until one works.
• Optimized user experience – Load content as soon as any request succeeds, instead of waiting for all attempts.

Here are two real-world examples where it helps.

Reducing Latency by Fetching from Multiple APIs

In distributed systems, redundancy improves reliability and performance by providing multiple sources for the same data. With Promise.any(), you can make use of this by requesting data from multiple API endpoints at once and using the first successful response.

Consider a scenario where your application needs to fetch data and has access to multiple API servers:

function fetchFromApi1() {
  return fetch("https://api1.example.com/data")
    .then(response => {
      if (!response.ok) throw new Error('API 1 failed');
      return response.json();
    });
}

function fetchFromApi2() {
  return fetch("https://api2.example.com/data")
    .then(response => {
      if (!response.ok) throw new Error('API 2 failed');
      return response.json();
    });
}

function fetchFromBackupAPI() {
  return fetch("https://backup.example.com/data")
    .then(response => {
      if (!response.ok) throw new Error('Backup API failed');
      return response.json();
    });
}

// Attempt to fetch from all APIs simultaneously
Promise.any([
  fetchFromApi1(),
  fetchFromApi2(),
  fetchFromBackupAPI()
])
  .then(data => {
    console.log("Successfully retrieved data:", data);
    updateUserInterface(data);
  })
  .catch(error => {
    console.error("All API requests failed:", error);
    showErrorMessage("Unable to fetch data. Please try again later.");
  });

This implementation provides several advantages. First, it improves response times by accepting the first successful response rather than waiting for a specific API to respond. Second, it automatically handles failover – if one API fails, the application seamlessly uses data from another successful response. Finally, it maintains a clean, readable codebase while implementing complex redundancy logic.

Enhanced Resource Loading

Another practical application of Promise.any() involves optimizing resource loading, particularly for assets like images that might be available from multiple CDNs. This approach can significantly improve loading times and reliability:

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

function loadOptimizedImage(imagePath) {
  const cdnUrls = [
    `https://cdn1.example.com/${imagePath}`,
    `https://cdn2.example.com/${imagePath}`,
    `https://backup-cdn.example.com/${imagePath}`
  ];

  return Promise.any(cdnUrls.map(url => loadImage(url)))
    .then(({ url, img }) => {
      console.log(`Successfully loaded image from ${url}`);
      return img;
    })
    .catch(errors => {
      console.error("Failed to load image from all CDNs:", errors);
      return loadFallbackImage();
    });
}

This pattern ensures users see images as quickly as possible while maintaining resilience against CDN failures. The code attempts to load the image from multiple sources simultaneously, using the first successful response and gracefully falling back to alternatives when needed.

Error Handling and Edge Cases

While Promise.any() is useful for finding success among failure, it’s important to know what happens when all promises are rejected.

When every promise fails, the Promise.any() method throws a special AggregateError. This error object bundles all rejection reasons, providing comprehensive debugging information:

async function demonstrateAggregateError() {
  try {
    await Promise.any([
      Promise.reject(new Error("Database connection failed")),
      Promise.reject(new Error("Network timeout")),
      Promise.reject(new Error("Invalid credentials"))
    ]);
  } catch (error) {
    console.log(error instanceof AggregateError); // true
    console.log(error.errors); // Array of all rejection reasons
    console.log(error.message); // "All promises were rejected"
  }
}

Since Promise.any() can fail completely, always prepare for the possibility of an AggregateError and handle it appropriately based on the needs of your application.

This error behavior distinguishes Promise.any() from other Promise methods like all() or race(). While those methods simply reject with a single error, Promise.any() is unique in throwing the specialized AggregateError object.

Good Practices and Performance Considerations

To make the most effective use of Promise.any(), consider these key practices.

First, always provide meaningful fallbacks and error handling. While Promise.any() is designed to find success, you should still plan for scenarios where all promises fail. This means implementing appropriate error messages, retry logic, or degraded functionality when necessary.

Second, carefully consider the number of promises you’re handling. While Promise.any() can handle many concurrent promises, each promise consumes resources. It’s hard to set an arbitrary limit, but likely 3-5 concurrent operations should provide a good balance between redundancy and resource utilization.

Finally, remember that Promise.any() continues executing other promises even after one succeeds. While this doesn’t affect the resolved value, it can impact performance if the remaining promises perform resource-intensive operations. Consider canceling remaining operations when possible:

let controller = new AbortController();

async function fetchWithTimeout(url, signal) {
  return fetch(url, { signal })
    .then(response => response.json());
}

const urls = [
  'https://api1.example.com/data',
  'https://api2.example.com/data',
  'https://api3.example.com/data'
];

Promise.any(urls.map(url =>
  fetchWithTimeout(url, controller.signal)
))
  .then(data => {
    controller.abort(); // Cancel remaining requests
    processData(data);
  })
  .catch(error => handleError(error));

Key Takeaways

Promise.any() represents a powerful addition to the concurrency management methods in JavaScript Promise API. It works well for scenarios that need fallback mechanisms, such as trying multiple CDN endpoints, attempting different authentication methods, or racing between cached and fresh data sources. The method is most useful in distributed systems where you need to handle unreliable services gracefully (for instance, when implementing circuit breakers or managing redundant microservice calls).

When used appropriately, Promise.any() can significantly improve your application’s reliability and user experience. But remember that it’s not always the best choice. Consider your specific use case, error handling requirements, and performance needs when choosing between Promise.any() and other promise combinators.

Promises are a fundamental part of modern asynchronous JavaScript, but they are just one piece of the puzzle. To fully grasp asynchronous programming, it’s important to see how Promises fit within the bigger picture – how they interact with async/await, how JavaScript schedules tasks, and how Promise combinators like Promise.all and Promise.race help manage multiple asynchronous operations. Explore these concepts in depth in our Mastering Asynchronous JavaScript guide.