Understanding Promise.all() in JavaScript

The Problem Promise.all Solves

Before Promise.all, developers had to await promises sequentially. Each operation waits for the previous one to complete, even when they don't depend on each other.

async function fetchData() {
 const user = await api.getUser();
 const posts = await api.getPosts();
 const comments = await api.getComments();
 // Total time = time(user) + time(posts) + time(comments)
}

How Promise.all Changes the Game

Promise.all executes all promises concurrently. For three operations taking 1 second each, Promise.all completes in approximately 1 second instead of 3 seconds.

async function fetchData() {
 const [user, posts, comments] = await Promise.all([
 api.getUser(),
 api.getPosts(),
 api.getComments()
 ]);
 // Total time = max(time(user), time(posts), time(comments))
}
```\n
This performance difference makes Promise.all essential for modern web applications. By running independent operations in parallel, you can significantly reduce overall execution time and improve user experience.

Core Behavior and Characteristics

Order Preservation

Promise.all preserves the order of results based on the order of input promises, not the order in which promises resolve. This is crucial for destructuring and mapping results to their sources.

const p1 = new Promise(resolve => setTimeout(() => resolve('first'), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve('second'), 100));
const p3 = new Promise(resolve => setTimeout(() => resolve('third'), 500));

Promise.all([p1, p2, p3]).then(([first, second, third]) => {
 // first = 'first', second = 'second', third = 'third'
 // Results are in input order, NOT resolution order
});

Short-Circuit on Rejection

Promise.all rejects immediately when any input promise rejects. This "fail-fast" behavior means one failure prevents other promises from returning their results, even if they're already in progress.

Promise.all([
 Promise.resolve('success'),
 Promise.reject(new Error('failure')),
 Promise.resolve('another success')
]).then(results => {
 // This block never runs
}).catch(error => {
 // error.message = 'failure' - first rejection wins
});

Understanding this behavior is critical for proper error handling in your applications.

Error Handling Strategies

Promise.all's rejection behavior requires careful consideration. Since it rejects on the first error, you need strategies to handle partial failures appropriately. Effective error handling is crucial for building reliable web applications that gracefully manage API failures.

Strategy: Promise.allSettled

For scenarios where you want all promises to complete regardless of failures, use Promise.allSettled. It returns an array of objects with status and value/reason for each promise.

async function fetchAllData() {
 const results = await Promise.allSettled([
 fetch('/api/users'),
 fetch('/api/products'),
 fetch('/api/orders')
 ]);

 const successful = results
 .filter(r => r.status === 'fulfilled')
 .map(r => r.value);

 const failed = results
 .filter(r => r.status === 'rejected')
 .map(r => r.reason);

 return { successful, failed };
}

This pattern is ideal for dashboards or reports where partial data is better than no data.

Strategy: Catch with Fallbacks

Wrap individual promises in catch blocks to provide fallback values. This ensures Promise.all completes even if some operations fail.

async function fetchWithFallbacks() {
 const results = await Promise.all([
 fetchData().catch(e => ({ error: true, message: e.message })),
 fetchBackup().catch(e => ({ error: true, message: e.message })),
 fetchAlternative().catch(e => ({ error: true, message: e.message }))
 ]);

 return results;
}

This approach gives you granular control over error handling for each operation.

Common Use Cases and Patterns

Promise.all enables several powerful patterns for modern JavaScript applications:

Best Practices and Pitfalls

Use for Independent Operations Only

Promise.all is only appropriate when operations are truly independent. Don't use it when one operation depends on another's result.

// WRONG - depends on userId from first call
Promise.all([
 api.getUser(),
 api.getOrders(user.id)
]);

// CORRECT - sequential await for dependent operations
const user = await api.getUser();
const orders = await api.getOrders(user.id);

Set Appropriate Timeouts

Prevent hanging promises by setting timeouts. This ensures your application doesn't wait indefinitely for a slow operation.

const withTimeout = (promise, ms) => {
 return Promise.race([
 promise,
 new Promise((_, reject) =>
 setTimeout(() => reject(new Error('Timeout')), ms)
 )
 ]);
};

await Promise.all([
 withTimeout(fetch('/api/data1'), 5000),
 withTimeout(fetch('/api/data2'), 5000)
]);

Modern Alternatives and Complements

JavaScript provides several Promise utilities beyond Promise.all for different scenarios: