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.

Trung Vũ Hoàng
Author
1. Promise.all — "All or Nothing"
Runs all Promises at the same time and waits 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 datasets.
Querying the database in parallel to reduce API response time.
Validating multiple files before upload.
Note: If one request fails, you won’t know what happened to the others. If you need the outcome of each task individually, use allSettled.
2. Promise.allSettled — "Wait for Everyone, Leave No One Behind"
Waits for all Promises to finish — success or failure, it doesn’t matter. 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 emails — you need to know which emails succeeded and which failed.
Deleting multiple records — continue even if a few records fail due to permission errors.
Aggregating data from multiple unstable third-party APIs.
3. Promise.race — "Whoever Finishes First Wins"
Returns the result of the Promise that completes first — whether it succeeds or fails. 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:
Setting a timeout for requests to a slow server.
Fetching data from multiple mirror servers — pick the fastest responder.
Cancelling an animation if a user event happens first.
4. Promise.any — "Only One Needs to Succeed"
Returns the result of the first successful Promise. Failed Promises are ignored. It only fails if all Promises fail — in that case 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 still displays even if one CDN is down.
Authenticating through multiple gateways in parallel.
Querying cache and network at the same time — take 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 result |
| One finishes (any) | One fails (any) | Timeouts, server racing |
| One succeeds | All fail | Fallbacks, multi-source |
6. Important Notes
Always have
.catch(): Unhandled Promises can crash a Node.js process entirely.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 represent four completely different orchestration strategies. Choosing the right one not only makes your code cleaner, but also helps you avoid subtle logic bugs:
all→ You need everything; no missing pieces allowed.allSettled→ You need each individual outcome, including failures.race→ You only need the fastest result, whether good or bad.any→ You 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.