JavaScript Promises: .all() vs .allSettled() and .race() vs .any()

Smriti — Sat, 14 Jun 2025 21:08:05 +0000

Managing multiple asynchronous operations in JavaScript can become complex. Fortunately, JavaScript provides several built-in methods—.all(), .allSettled(), .race(), and .any()—to handle such operations gracefully. This blog provides a professional, structured comparison of these promise methods with real code examples and practical use cases.
Understanding the Basics
Before diving into comparisons, let’s revisit what a Promise is:
A Promise is an object representing the eventual completion or failure of an asynchronous operation.
Each of the methods we'll discuss below operates on an array of promises and provides different behaviors based on their resolution or rejection.
Promise.all() – Wait for All to Succeed
Promise.all() returns a single promise that resolves when all of the input promises resolve, or rejects if any of the promises reject.
Use Case
Use when all tasks are required to succeed. If even one fails, the entire operation fails.
Example

const p1 = Promise.resolve('Result 1');
const p2 = Promise.resolve('Result 2');
const p3 = Promise.reject('Error in p3');

Promise.all([p1, p2, p3])
  .then(results => console.log('All success:', results))
  .catch(error => console.error('At least one failed:', error));

Output
At least one failed: Error in p3
Promise.allSettled() – Wait for All to Finish (Regardless of Success or Failure)
Returns a promise that resolves after all promises have settled (fulfilled or rejected). It never rejects.
Use Case

Promise.allSettled([p1, p2, p3])
  .then(results => console.log('All settled:', results));

Output
[ { status: 'fulfilled', value: 'Result 1' }, { status: 'fulfilled', value: 'Result 2' }, { status: 'rejected', reason: 'Error in p3' } ]
Promise.race() – First Settled Wins
Returns a promise that settles as soon as the first promise settles (either resolved or rejected).
Use Case
Use when you care about the fastest result, regardless of outcome.
Example

const fast = new Promise(resolve => setTimeout(() => resolve("Fast!"), 100));
const slow = new Promise(resolve => setTimeout(() => resolve("Slow!"), 500));

Promise.race([fast, slow])
  .then(result => console.log('Winner:', result));

Output
Winner: Fast!
Promise.any() – First Successful Only
Returns a promise that fulfills as soon as any of the input promises fulfills. Rejects only if all of them reject.
Use Case
Use when you want at least one success, and can ignore failures
Example

const fail1 = Promise.reject("Fail 1");
const fail2 = Promise.reject("Fail 2");
const success = Promise.resolve("Success!");

Promise.any([fail1, fail2, success])
  .then(result => console.log("First success:", result))
  .catch(err => console.log("All failed", err));

Output
First success: Success!
Summary

Use Promise.all() when everything must succeed.
Use Promise.allSettled() to inspect all outcomes.
Use Promise.race() for the fastest result (good or bad).
Use Promise.any() to get the first successful result only.

A Beginner's Guide to Promises in JavaScript (with Real Examples)

Smriti — Sat, 14 Jun 2025 20:49:55 +0000

What is a Promise?
A Promise is just a way for JavaScript to handle asynchronous operations - things that take time
like:

Fetching data from a server
Reading a file
Waiting for a timeout Instead of blocking everything, JavaScript says: "Hey! I'll do this task, and when I'm done, I'll let you know." A Promise can be in 3 states:
Pending - task is not done yet
Resolved - task completed successfully
Rejected - task failed

Basic Syntax of a Promise

const promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Task done!");
} else {
reject("Something went wrong.");
}
});
promise
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});

Real Example: Fake API Call

function fakeAPICall() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data received!");
}, 2000);
});
}
fakeAPICall()
.then(data => console.log(data))
.catch(err => console.log(err));

Output after 2 seconds: Data received!

Chaining Promises
doSomething()
.then(result1 => doSomethingElse(result1))
.then(result2 => doMore(result2))
.catch(error => console.log(error));

My Personal Tip
Think of them like a food delivery app:

You order (async task starts)
You get food (resolve)
Or delivery fails (reject) And .then() is what you do when food arrives

Resources That Helped Me

MDN Web Docs - Promises
JavaScript.info - Promises

Final Thoughts
At first, I used to avoid Promises. But once I started coding with real APIs in React, I had to learn
them - and I'm glad I did.
If you're new to Promises, I hope this helped you simplify the concept!
Drop a comment if you found this helpful or if you want me to write about async/await next!
Thanks for reading!
Follow me on Dev.to - this is just the start of my blog journey

DEV Community: Smriti

JavaScript Promises: .all() vs .allSettled() and .race() vs .any()

A Beginner's Guide to Promises in JavaScript (with Real Examples)