Mastering Promise Combinators: Promise.all(), Promise.race(), Promise.any(), and Promise.allSettled()

Mastering Promise Combinators: Promise.all(), Promise.race(), Promise.any(), and Promise.allSettled()

Introduction: Level Up Your Asynchronous JavaScript

Asynchronous JavaScript is a cornerstone of modern web development, enabling us to handle long-running operations without blocking the main thread and freezing the user interface. Promises, in turn, are the modern answer to managing asynchronous operations, providing a cleaner and more structured approach than callbacks. But what happens when you need to coordinate multiple promises? That's where Promise combinators come in.

This post dives deep into four powerful Promise combinators: Promise.all(), Promise.race(), Promise.any(), and Promise.allSettled(). We'll explore each method in detail, understand their use cases, and provide practical examples to help you master these tools and elevate your asynchronous JavaScript skills. Whether you're fetching data from multiple APIs, handling complex workflows, or building resilient error handling, these combinators will become invaluable in your toolkit.

Understanding Promise.all(): All or Nothing

Promise.all() takes an iterable of promises (e.g., an array) as input and returns a single Promise. This returned promise fulfills when all of the input promises have fulfilled. The fulfilled value is an array containing the fulfilled values of each promise in the same order as they were passed.

However, and this is crucial, if any of the promises in the iterable reject, the Promise.all() promise immediately rejects with the rejection reason of the first rejected promise. This "all or nothing" behavior makes it ideal for scenarios where you need all operations to succeed for the overall task to be considered successful.

Example: Imagine fetching user data and user preferences from two different APIs. Both are required for the application to function correctly.

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        resolve({ id: userId, name: 'John Doe' });
      } else {
        reject("Invalid user id");
      }
    }, 500);
  });
}

function fetchUserPreferences(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        resolve({ theme: 'dark', notifications: true });
      } else {
        reject("Invalid user id");
      }
    }, 750);
  });
}

async function getUserDataAndPreferences(userId) {
  try {
    const [userData, userPreferences] = await Promise.all([
      fetchUserData(userId),
      fetchUserPreferences(userId),
    ]);

    console.log("User Data:", userData);
    console.log("User Preferences:", userPreferences);
    return { userData, userPreferences };

  } catch (error) {
    console.error("Error fetching data:", error);
    // Handle the error appropriately, e.g., display an error message to the user.
    return null; // Or throw the error, depending on your application's needs
  }
}

getUserDataAndPreferences(1); // Success
getUserDataAndPreferences(-1); // Rejection

Practical Advice:

• Error Handling is Key: Always wrap Promise.all() in a try...catch block to handle potential rejections gracefully.
• Order Matters: The order of results in the resolved array matches the order of the input promises.
• Parallel Execution: Promise.all() effectively executes the promises in parallel (or at least, schedules them to be executed concurrently).

Racing to the Finish Line with Promise.race()

Promise.race() also takes an iterable of promises. However, instead of waiting for all promises to fulfill, it settles (either fulfills or rejects) as soon as one of the promises in the iterable settles. The Promise.race() promise will then fulfill or reject with the same value or reason as the first settled promise.

This is particularly useful for implementing timeouts or choosing between multiple redundant services.

Example: Imagine you have two different APIs providing the same data, but one is known to be faster on average. You can use Promise.race() to use whichever API responds first.

function fetchDataFromAPI1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data from API 1");
    }, 200);
  });
}

function fetchDataFromAPI2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data from API 2");
    }, 300);
  });
}

async function getFastestResponse() {
  try {
    const result = await Promise.race([fetchDataFromAPI1(), fetchDataFromAPI2()]);
    console.log("Fastest Response:", result);
    return result;
  } catch (error) {
    console.error("Error:", error);
    return null;
  }
}

getFastestResponse(); // Likely logs "Fastest Response: Data from API 1"

Practical Advice:

• Timeout Implementation: Use Promise.race() with a setTimeout promise to implement timeouts for other asynchronous operations. If the original promise doesn't resolve within the timeout period, the setTimeout promise will reject, causing Promise.race() to reject as well.
• Redundant Services: Use Promise.race() to choose the fastest response from multiple backup services.
• Cancellation: Be aware that even after Promise.race() settles, the other promises in the iterable will continue to execute. You might need to implement cancellation logic if you need to stop those promises from completing.

Promise.any(): First to Fulfill Wins

Promise.any() is similar to Promise.race(), but with a crucial difference: it waits for the first fulfilled promise in the iterable. It ignores rejected promises until all promises have rejected. If all promises reject, Promise.any() rejects with an AggregateError containing all the rejection reasons.

This is useful when you have multiple sources of data and only need one to succeed.

Example: Consider fetching data from multiple mirrors of a content delivery network (CDN). You only need the data from one mirror to be successful, and you want to ignore any mirrors that are temporarily unavailable.

function fetchFromCDN(cdnUrl) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const random = Math.random();
      if (random > 0.2) { // Simulate a CDN being unavailable sometimes
        resolve(`Data from ${cdnUrl}`);
      } else {
        reject(`CDN ${cdnUrl} unavailable`);
      }
    }, Math.random() * 500); // Simulate varying response times
  });
}

async function getFromAnyCDN() {
  try {
    const result = await Promise.any([
      fetchFromCDN("cdn1.example.com"),
      fetchFromCDN("cdn2.example.com"),
      fetchFromCDN("cdn3.example.com"),
    ]);
    console.log("Data from CDN:", result);
    return result;
  } catch (error) {
    console.error("All CDNs failed:", error);
    if (error instanceof AggregateError) {
      console.log("Rejection Reasons:", error.errors);
    }
    return null;
  }
}

getFromAnyCDN();

Practical Advice:

• Resilience: Promise.any() improves the resilience of your application by allowing it to tolerate failures from some data sources.
• AggregateError Handling: Be sure to handle the AggregateError that is thrown when all promises reject. This error contains valuable information about why each promise rejected.
• Avoid Potential Deadlocks: If all promises perpetually pend (never resolve or reject), Promise.any() will also pend indefinitely. Ensure your promises have appropriate timeouts or error handling to prevent deadlocks.

Handling All Outcomes with Promise.allSettled()

Promise.allSettled() takes an iterable of promises and returns a single Promise that fulfills when all of the input promises have settled (either fulfilled or rejected). The fulfilled value is an array of objects, each describing the outcome of one of the input promises. Each object has a status property, which is either "fulfilled" or "rejected". If the promise fulfilled, the object will also have a value property containing the fulfilled value. If the promise rejected, the object will have a reason property containing the rejection reason.

This is useful when you need to know the outcome of every promise, regardless of whether it fulfilled or rejected. This is particularly valuable in situations like analytics tracking where you want to ensure all events are logged, even if some operations fail.

Example: Consider submitting multiple analytics events. You want to ensure that you log the success or failure of each event submission.

function submitAnalyticsEvent(eventData) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const random = Math.random();
      if (random > 0.1) { // Simulate occasional failures
        resolve(`Event submitted successfully: ${JSON.stringify(eventData)}`);
      } else {
        reject(`Event submission failed: ${JSON.stringify(eventData)}`);
      }
    }, Math.random() * 200);
  });
}

async function submitAllAnalyticsEvents(events) {
  const results = await Promise.allSettled(events.map(submitAnalyticsEvent));

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Event ${index + 1} submitted successfully: ${result.value}`);
    } else {
      console.error(`Event ${index + 1} submission failed: ${result.reason}`);
      // Implement retry logic, logging, or other error handling here
    }
  });

  return results;
}

const eventsToSubmit = [
  { type: 'page_view', url: '/home' },
  { type: 'button_click', button: 'submit' },
  { type: 'form_submission', form: 'contact' },
];

submitAllAnalyticsEvents(eventsToSubmit);

Practical Advice:

• Comprehensive Logging: Use Promise.allSettled() for comprehensive logging and monitoring of asynchronous operations.
• Retry Logic: Implement retry logic for failed operations based on the rejection reasons.
• Progress Tracking: Use Promise.allSettled() to track the progress of multiple asynchronous operations and provide feedback to the user.
• Don't Forget to Process Results: Remember to iterate through the results array and handle both fulfilled and rejected promises appropriately.

Conclusion: Choose the Right Tool for the Job

Promise.all(), Promise.race(), Promise.any(), and Promise.allSettled() are powerful tools for managing and coordinating multiple promises in your JavaScript applications. By understanding their unique behaviors and use cases, you can write more efficient, robust, and maintainable asynchronous code. Remember to choose the right combinator based on your specific needs, prioritize error handling, and consider the implications of each combinator's behavior on the overall application logic. Mastering these combinators will significantly improve your ability to handle complex asynchronous workflows and build more resilient and responsive applications.