Modern JavaScript applications frequently trigger multiple concurrent asynchronous operations—such as fetching user profile data, fetching notification badges, and logging telemetry. JavaScript provides four primary Promise combinators: Promise.all, Promise.allSettled, Promise.race, and Promise.any.
Understanding how each combinator handles fulfillment and rejection is critical for writing robust async code and passing technical interviews.
1. Promise.all — Fail-Fast Parallel Concurrency
Promise.all takes an array of Promises and returns a single Promise that fulfills when all input promises fulfill. If any input promise rejects, the returned Promise immediately rejects with that reason.
const p1 = fetch('/api/user');
const p2 = fetch('/api/posts');
const p3 = fetch('/api/comments');
Promise.all([p1, p2, p3])
.then(([user, posts, comments]) => {
console.log("All requests succeeded:", user, posts, comments);
})
.catch((err) => {
console.error("Failed fast because one request rejected:", err);
});2. Promise.allSettled — Reliable Bulk Results
Introduced in ES2020, Promise.allSettled waits for all input promises to complete, regardless of whether they fulfill or reject. It never rejects due to an input promise failure.
const requests = [
fetch('/api/valid-endpoint'),
fetch('/api/broken-endpoint'),
];
Promise.allSettled(requests).then((results) => {
results.forEach((result, idx) => {
if (result.status === 'fulfilled') {
console.log(`Request ${idx} succeeded with value:`, result.value);
} else {
console.warn(`Request ${idx} failed with reason:`, result.reason);
}
});
});3. Promise.race — First Settled Wins
Promise.race fulfills or rejects as soon as the first input promise settles (fulfills OR rejects).
// Useful for request timeouts
const fetchWithTimeout = (url, timeoutMs) => {
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error("Request timed out")), timeoutMs)
);
return Promise.race([fetch(url), timeoutPromise]);
};4. Promise.any — First Fulfilled Wins
Introduced in ES2021, Promise.any fulfills as soon as the first input promise fulfills. If all input promises reject, it rejects with an AggregateError.
const primaryServer = fetch('https://primary.cdn.com/data');
const fallbackServer = fetch('https://backup.cdn.com/data');
Promise.any([primaryServer, fallbackServer])
.then((res) => res.json())
.catch((err) => {
console.error("All CDN mirrors failed:", err.errors);
});Practice Promise Live Coding
Frequently Asked Questions
When should I use Promise.allSettled instead of Promise.all?
Use Promise.allSettled when you want to execute multiple independent asynchronous operations and need the status/result of every operation, regardless of whether some fail. Use Promise.all when operations are interdependent and any single failure should immediately abort the entire operation.
Conduct Live Coding Interviews in the Browser
No candidate sign-up required. Create a room, share the link, and code together in real time with shared code execution.