Advanced Promise Methods: all, allSettled, race, any — When to Use Which?
If you only use async/await sequentially, your app is wasting performance potential—each request waits for the previous one to finish before starting. Promise’s static methods (all, allSettled, race, any) let you orchestrate multiple asynchronous tasks in parallel with the right strategy for each problem.

Trung Vũ Hoàng
Author
1. Promise.all — "All or Nothing"
Run all Promises at once and wait until every Promise succeeds. If any Promise fails, the whole operation fails immediately.
const [userData, posts] = await Promise.all([
fetch('/api/user').then(r => r.json()),
fetch('/api/posts').then(r => r.json())
]);Use when:
A dashboard needs to load multiple interdependent data sources.
Running parallel database queries to reduce API response time.
Validating multiple files before uploading.
Note: If one request fails, you won’t know what happened to the others. In cases where you need each individual result—use allSettled.
2. Promise.allSettled — "Wait for Everyone, Leave No One Behind"
Wait for all Promises to finish—success or failure. The result is an array of objects containing status and value/reason. (ES2020)
const results = await Promise.allSettled([
sendEmail(user1),
sendEmail(user2),
sendEmail(user3)
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Sent successfully:', result.value);
} else {
console.error('Send failed:', result.reason);
}
});Use when:
Sending bulk email—need to know which emails succeeded and which failed.
Deleting multiple records—continue even if some records fail due to permission issues.
Aggregating data from multiple unreliable third-party APIs.
3. Promise.race — "First to the Finish Line Wins"
Returns the result of the Promise that settles first—whether fulfilled or rejected. The rest are ignored.
const timeout = new Promise((_, reject) =>
setTimeout(() => reject(new Error('Request timeout!')), 5000)
);
const data = await Promise.race([
fetch('/api/slow-endpoint'),
timeout
]);Use when:
Adding a timeout to requests to a slow server.
Fetching data from multiple mirror servers—pick the fastest response.
Cancelling an animation if a user event happens first.
4. Promise.any — "Only One Success Is Enough"
Returns the result of the first fulfilled Promise. Ignores rejected Promises. It only fails if all Promises fail—then it throws an AggregateError containing every failure reason. (ES2021)
const image = await Promise.any([
loadFromCDN_A(imageUrl),
loadFromCDN_B(imageUrl),
loadFromCDN_C(imageUrl)
]);Use when:
Loading images from multiple CDNs—ensure the image displays even if one CDN is down.
Authenticating through multiple gateways in parallel.
Querying cache and network at the same time—use whichever returns data first.
5. Summary: Which Method Should You Choose?
Method | Resolves when | Rejects when | Best for |
|---|---|---|---|
| All succeed | One fails | Interdependent data |
| All finish | Never | Need every outcome |
| One settles (any) | One rejects (any) | Timeouts, server racing |
| One succeeds | All fail | Fallbacks, multi-source |
6. Important Notes
Always include
.catch(): Unhandled Promises can crash the Node.js process completely.Limit parallel requests:
Promise.allwith 100 requests at once can saturate bandwidth—consider batching.Check browser compatibility:
Promise.anyandallSettledaren’t supported in IE and some older browsers.
Conclusion
Promise’s four static methods serve four completely different orchestration strategies. Choosing the right one not only makes your code cleaner, but also helps you avoid subtle logic bugs:
all→ Need everything; no missing pieces allowed.allSettled→ Need each individual outcome, including failures.race→ Only need the fastest result, good or bad.any→ Need at least one success; ignore failures.
Frequently Asked Questions
Bài viết liên quan

Zustand Async: 5 Effective Ways to Handle Async in React
Every real-world React app needs to communicate with async APIs. If handled poorly, it’s easy to run into issues like frozen UI, race conditions, memory leaks, or showing stale data. Zustand solves this with an extremely simple syntax—define async actions directly in the store, without complex middleware like Redux Thunk or Saga.

Advanced Promises: all, allSettled, race, any — When to Use Which?
If you only use sequential async/await, your app is wasting performance potential — each request has to wait for the previous one to finish before it can start. Promise’s static methods (all, allSettled, race, any) let you orchestrate multiple async tasks in parallel using the strategy that fits each problem.

Zustand Async: 5 Effective Ways to Handle Async Operations in React
Every real-world React app has to communicate with asynchronous APIs. If managed poorly, your app can run into issues like a frozen UI, race conditions, memory leaks, or showing stale data. Zustand solves this with an incredibly simple syntax — define async actions directly in the store, without complex middleware like Redux Thunk or Saga.