Everything You Need to Know About JavaScript Promises: Promise.all, Promise.race, and More

Promises are a powerful tool in JavaScript that help manage asynchronous operations. If you’ve ever worked with APIs, file systems, or timers in JavaScript, chances are you’ve encountered promises. In this blog, we’ll break down the differences between Promise, Promise.all, Promise.race, and Promise.any, and discuss when to use each of them.

What is a Promise?

A Promise in JavaScript represents the eventual result of an asynchronous operation. Think of it as a placeholder for a value that you’ll get in the future. A promise can be in one of three states:

1. Pending: The operation is still ongoing.
2. Fulfilled: The operation completed successfully, and you have the result.
3. Rejected: The operation failed, and you have an error.

Here’s a simple example of creating and using a promise:

// Basic Promise Example
let promise = new Promise((resolve, reject) => {
  let success = true; // Simulate success or failure

  if (success) {
    resolve("Operation was successful!");
  } else {
    reject("Something went wrong!");
  }
});

promise
  .then((message) => {
    console.log(message);  // This runs if the promise is resolved
  })
  .catch((error) => {
    console.log(error);  // This runs if the promise is rejected
  });

What is Promise.all?

Promise.all takes an array of promises and returns a single promise. This promise resolves when all the promises in the array are fulfilled. If any promise in the array is rejected, the whole Promise.all operation fails and rejects immediately.

Example:

// Example with Promise.all
let promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'First task completed'));
let promise2 = new Promise((resolve) => setTimeout(resolve, 2000, 'Second task completed'));
let promise3 = new Promise((resolve) => setTimeout(resolve, 1500, 'Third task completed'));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results);  // ["First task completed", "Second task completed", "Third task completed"]
  })
  .catch((error) => {
    console.log('Error: ', error);  // In case one of the promises rejects
  });

When to Use:

Use Promise.all when you need all your asynchronous operations to complete before proceeding. For example:

• Fetching data from multiple APIs and combining the results.
• Running multiple independent tasks where the final output depends on all tasks being successful.

What is Promise.race?

Promise.race takes an array of promises and returns a single promise. This promise settles (resolves or rejects) as soon as the first promise in the array settles.

Example:

// Example with Promise.race
let promiseA = new Promise((resolve) => setTimeout(resolve, 3000, 'Promise A'));
let promiseB = new Promise((resolve) => setTimeout(resolve, 1000, 'Promise B'));
let promiseC = new Promise((resolve) => setTimeout(resolve, 2000, 'Promise C'));

Promise.race([promiseA, promiseB, promiseC])
  .then((result) => {
    console.log(result);  // "Promise B" - This is the first one to resolve
  })
  .catch((error) => {
    console.log('Error: ', error);
  });

When to Use:

Use Promise.race when you want to act on the result of the fastest promise, whether it succeeds or fails. For example:

• Setting up a timeout for a slow API call.
• Responding to the first available server in a cluster.

What is Promise.any?

Promise.any takes an array of promises and returns a single promise. This promise resolves as soon as any one of the promises is fulfilled. If all the promises are rejected, Promise.any rejects with an AggregateError that contains all the rejection reasons.

Example:

// Example with Promise.any
let promise1 = new Promise((resolve, reject) => setTimeout(reject, 1000, 'Promise 1 failed'));
let promise2 = new Promise((resolve) => setTimeout(resolve, 2000, 'Promise 2 succeeded'));
let promise3 = new Promise((resolve) => setTimeout(resolve, 1500, 'Promise 3 succeeded'));

Promise.any([promise1, promise2, promise3])
  .then((result) => {
    console.log(result);  // "Promise 2 succeeded" - First to resolve successfully
  })
  .catch((error) => {
    console.log('All promises were rejected:', error);  // If all promises fail
  });

When to Use:

Use Promise.any when you need just one successful result and can ignore the failures. For example:

• Fetching data from multiple redundant APIs where you only care about the first successful response.
• Loading resources like images or scripts where at least one must succeed.

Key Differences Between Promise.all, Promise.race, and Promise.any

Method	What It Does	Rejects When	Ideal For
Promise.all	Resolves when all promises are fulfilled.	If any one promise is rejected.	Waiting for multiple tasks to complete.
Promise.race	Resolves or rejects as soon as the first promise settles.	No special rejection condition.	Acting on the fastest result.
Promise.any	Resolves as soon as any promise is fulfilled.	If all promises are rejected.	Getting the first successful result.

---

Final Thoughts

Understanding promises and their methods is essential for writing clean and efficient asynchronous code in JavaScript. Here’s a quick recap:

• Use Promise.all when all tasks need to succeed.
• Use Promise.race when you care about the fastest result.
• Use Promise.any when you’re happy with the first successful result.

By choosing the right promise method for your scenario, you can optimize your code and handle asynchronous operations more effectively. Keep experimenting, and you’ll master promises in no time!

Let me know your thoughts in the comments below. Happy coding!