Welcome back, code wizards! 🧙♂️ If you’ve been writing JavaScript for a while, you probably use async/await every single day. It’s clean, it looks synchronous, and it saves us from the dark ages of callback hell.
But let’s be honest: Are you still writing waterfalls of await statements inside loops, blocking your app’s performance? Or manually trying to cancel hanging network requests?
It’s time to level up. In this guide, we are diving past basic async/await into the advanced, modern arsenal of asynchronous JavaScript. Grab your coffee (or potion) ☕, and let’s write some bulletproof code!
1. The Trap: Sequential await in Loops 🛑
Picture this: You need to fetch data for 3 different users. What’s the first thing most developers do?
❌ The Rookie Mistake
JavaScript
async function fetchAllUsers(userIds) {
const users = [];
for (const id of userids) {
// ⚠️ CRITICAL ERROR: This runs sequentially!
// If each request takes 1 second, total time = 3 seconds!
const user = await fetchUserData(id);
users.push(user);
}
return users;
}
Why it’s a trap:
awaitpauses the entire loop iteration. Even though user 1, 2, and 3 don’t depend on each other, you are making them wait in a polite British queue.
✅ The Modern Fix: Promise.all
If your asynchronous operations don’t depend on each other, fire them all at once using Promise.all:
JavaScript
async function fetchAllUsersModern(userIds) {
// Fire all requests simultaneously
const promises = userIds.map(id => fetchUserData(id));
// Wait for all of them to resolve together
const users = await Promise.all(promises);
return users;
}
✨ Boom! Total execution time drops from 3 seconds to roughly 1 second.
2. Dealing with Drama: Promise.allSettled vs Promise.all 🎭
What happens if one request fails in Promise.all? The whole thing crashes and rejects. Sometimes that’s what you want, but often you want a resilient application that doesn’t break just because one avatar image failed to load.
💡 The Solution: Promise.allSettled
Promise.allSettled waits for all promises to settle (either fulfilled or rejected) and returns an array of objects describing the outcome.
JavaScript
async function fetchDashboardData(userIds) {
const requests = userIds.map(id => fetchUserData(id));
// It never rejects early! It gathers all results.
const results = await Promise.allSettled(requests);
const successfulUsers = results
.filter(result => result.status === 'fulfilled')
.map(result => result.value);
const failedCount = results.filter(result => result.status === 'rejected').length;
console.log(`Loaded ${successfulUsers.length} users successfully.`);
if (failedCount > 0) {
console.warn(`⚠️ Warning: ${failedCount} requests failed.`);
}
return successfulUsers;
}
3. The Race Condition Solver: AbortController 🏎️
Have you ever had a user type frantically into a search bar, firing off 10 API requests, and older, slower responses overwrite newer ones? Or wanted to cancel a fetch request when a component unmounts?
Enter AbortController. It lets you pull the emergency brake on active fetch requests.
🛠️ Practical Code Example: Search Autocomplete
JavaScript
let currentController = null;
async function searchProducts(query) {
// If there is an ongoing request, abort it!
if (currentController) {
currentController.abort();
}
// Create a new controller for this request
currentController = new AbortController();
const { signal } = currentController;
try {
const response = await fetch(`https://api.store.com/search?q=${query}`, { signal });
const data = await response.json();
return data;
} catch (error) {
if (error.name === 'AbortError') {
console.log('🛑 Previous fetch request successfully cancelled.');
} else {
console.error('❌ Network error:', error);
}
}
}
4. Mini Project: The Resilient Multi-API Dashboard 🛠️
Let’s combine what we’ve learned into a fun mini-project: The Space Mission Status Board. We will fetch data from multiple endpoints concurrently, handle failures gracefully, and include a timeout using AbortSignal.timeout() (a modern native feature!).
JavaScript
// Modern native timeout using AbortSignal (No external libraries needed!)
async function fetchWithTimeout(url, timeoutMs = 3000) {
try {
const response = await fetch(url, {
signal: AbortSignal.timeout(timeoutMs)
});
return await response.json();
} catch (error) {
return { error: error.name === 'TimeoutError' ? 'Request timed out' : 'Failed to fetch' };
}
}
async function loadMissionControl() {
console.log('🚀 Loading mission control data...');
// Endpoints we want to check simultaneously
const endpoints = [
'https://api.spacexdata.com/v4/launches/latest',
'https://api.spacexdata.com/v4/roadster',
'https://api.spacexdata.com/v4/company'
];
const promises = endpoints.map(url => fetchWithTimeout(url, 4000));
// Wait for all to settle safely
const results = await Promise.allSettled(promises);
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`✅ Endpoint ${index + 1} data loaded:`, result.value);
} else {
console.error(`❌ Endpoint ${index + 1} failed completely.`);
}
});
console.log('✨ Mission Control dashboard ready!');
}
// Run our project!
loadMissionControl();
💡 Quick Pro-Tips for Modern Async JS
Top-Level await: You don’t always need to wrap your await keywords inside an async function anymore if you are using ES Modules (Node.js or modern frontend bundlers). You can await directly at the top level of your file!
Don’t Over-Await: Always ask yourself: “Do these operations depend on each other?” If the answer is no, use Promise.all or Promise.allSettled.
What advanced JavaScript concept or framework feature would you like us to explore next in our guide series? Let me know below! 👇
