Modern JavaScript Async Patterns You Should Know
From callbacks to async/await, understanding JavaScript's async patterns is essential for writing clean asynchronous code.
Key Insights
- async/await is syntactic sugar over Promises but dramatically improves readability
- Promise.allSettled is often better than Promise.all for independent operations
- AbortController gives you proper cancellation support for fetch requests
Promise.allSettled vs Promise.all
// Fails fast - one rejection kills everything
const results = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
// Better for independent operations
const results = await Promise.allSettled([fetchUser(), fetchPosts(), fetchComments()]);
const successful = results.filter(r => r.status === 'fulfilled').map(r => r.value);
Cancellation with AbortController
const controller = new AbortController();
const response = await fetch('/api/data', { signal: controller.signal });
// Cancel from elsewhere
controller.abort();
Error Handling Patterns
Wrap async operations at the appropriate boundary rather than try/catch around every await:
async function loadDashboard() {
const [user, posts] = await Promise.all([
fetchUser().catch(() => null),
fetchPosts().catch(() => []),
]);
return { user, posts };
}