Javascript Async Await: Every Pattern, Pitfall, and Performance Trick

// SLOW: sequential — 650ms total
async function getPageData(userId) {
 const user = await fetchUser(userId); // 200ms
 const posts = await fetchPosts(userId); // 300ms
 const settings = await fetchSettings(userId); // 150ms
 return { user, posts, settings };
}

// FAST: parallel — 300ms total (slowest request wins)
async function getPageData(userId) {
 const [user, posts, settings] = await Promise.all([
 fetchUser(userId),
 fetchPosts(userId),
 fetchSettings(userId),
 ]);
 return { user, posts, settings };
}

// Promise.all — rejects if ANY fails (fail-fast)
const [a, b] = await Promise.all([fetchA(), fetchB()]);

// Promise.allSettled — waits for ALL, never rejects
const results = await Promise.allSettled([fetchA(), fetchB()]);
results.forEach(r => {
 if (r.status === 'fulfilled') use(r.value);
 if (r.status === 'rejected') log(r.reason);
});
// Use when: partial success is acceptable

// Promise.race — first to settle wins
const result = await Promise.race([
 fetchData(),
 new Promise((_, rej) => setTimeout(() => rej(new Error('timeout')), 5000))
]);

// Promise.any — first to FULFILL (ignores rejections)
const fastest = await Promise.any([serverA(), serverB(), serverC()]);
// Use when: multiple redundant sources, want fastest

// WRONG: swallowed error
async function bad() {
 const data = await riskyOperation(); // throws = unhandled rejection
 return data;
}

// WRONG: mixing .then() and try/catch — confusing
async function alsobad() {
 try {
 return await fetch('/api').then(r => r.json());
 } catch (e) {} // What does this catch? Unclear.
}

// RIGHT: consistent async/await with try/catch
async function good() {
 try {
 const res = await fetch('/api');
 if (!res.ok) throw new Error('HTTP ' + res.status);
 return await res.json();
 } catch (err) {
 logger.error('API failed', err);
 throw err; // Re-throw unless you can recover
 }
}

// Result pattern — no exceptions escaping
async function safe(id) {
 try {
 return { ok: true, data: await fetchData(id) };
 } catch (err) {
 return { ok: false, error: err.message };
 }
}

const ids = [1, 2, 3, 4, 5];

// WRONG: forEach ignores the returned Promise
ids.forEach(async (id) => {
 await processItem(id); // This await is ignored by forEach!
});
// Code continues before any processItem completes

// CORRECT: parallel execution
await Promise.all(ids.map(id => processItem(id)));

// CORRECT: sequential execution
for (const id of ids) {
 await processItem(id);
}

// CORRECT: controlled concurrency (3 at a time)
async function batchProcess(ids, batchSize = 3) {
 for (let i = 0; i < ids.length; i += batchSize) {
 await Promise.all(ids.slice(i, i + batchSize).map(processItem));
 }
}

class SearchComponent {
 #controller = null;

 async search(query) {
 this.#controller?.abort(); // Cancel previous search
 this.#controller = new AbortController();
 const { signal } = this.#controller;
 try {
 const res = await fetch("/api/search?q=" + query, { signal });
 return res.json();
 } catch (err) {
 if (err.name === 'AbortError') return null; // Cancelled — ignore
 throw err;
 }
 }
}

// Timeout with AbortController:
async function fetchWithTimeout(url, ms = 5000) {
 const controller = new AbortController();
 const id = setTimeout(() => controller.abort(), ms);
 try {
 return await fetch(url, { signal: controller.signal });
 } finally {
 clearTimeout(id);
 }
}

// Paginated API — O(1) memory regardless of total records
async function* fetchAllPages(endpoint) {
 let page = 1;
 while (true) {
 const { data, hasMore } = await fetch(endpoint + "?page=" + page).then(r => r.json());
 yield* data;
 if (!hasMore) break;
 page++;
 }
}

for await (const user of fetchAllPages('/api/users')) {
 await processUser(user);
}

console.log("1 sync");
setTimeout(() => console.log("6 timer (macrotask)"), 0);
Promise.resolve().then(() => console.log("3 microtask"));
Promise.resolve()
  .then(() => console.log("4 microtask"))
  .then(() => console.log("5 chained microtask"));
console.log("2 sync");

// A loop that only awaits resolved promises never lets timers or I/O run:
//   while (true) await Promise.resolve();
// Yield to the event loop between chunks of work instead.
const yieldToEventLoop = () => new Promise((resolve) => setImmediate(resolve));

async function processAll(items, handle, chunk = 1000) {
  for (let i = 0; i < items.length; i++) {
    handle(items[i]);
    if (i % chunk === chunk - 1) await yieldToEventLoop();
  }
}

let sum = 0;
await processAll(Array.from({ length: 5000 }, (_, i) => i), (x) => { sum += x; });
console.log("7 processed, sum =", sum);