Async JavaScript

Why "Async" Even Exists

JavaScript runs on a single thread. That means only one piece of code can execute at a time. If you ask the network for data and *wait*, the entire page would freeze — buttons wouldn't click, animations would stop. That's unacceptable.

The solution: async work runs in the background, and the language gives you tools to react when it finishes. That's all "async" really means — "don't block the page while you're waiting."

Mental Model: The Three Tools

JavaScript has had three generations of async tools, each cleaner than the last:

1. Callbacks — pass a function to be called later. (Old, leads to "callback hell".) 2. Promises — an object that represents "a value that's coming soon". 3. async / await — modern syntax that lets you write Promise code that *looks* synchronous.

You'll mostly write async/await today, but you must understand Promises underneath.

Callbacks — The Original

setTimeout(() => {
  console.log("Runs after 1 second");
}, 1000);

You hand setTimeout a function. It calls it later. Simple — but when one async step depends on the previous, you get nesting nightmares ("pyramid of doom").

Promises — The Big Upgrade

A Promise is an object with one of three states:

• pending — work is in flight
• fulfilled — finished successfully (it has a value)
• rejected — failed (it has an error)

fetch("/api/users")
  .then((res) => res.json())     // runs on success
  .then((users) => console.log(users))
  .catch((err) => console.error(err)) // runs on any failure
  .finally(() => hideSpinner());      // runs no matter what

Each .then returns *another* Promise — that's why you can chain them flat instead of nesting.

async / await — The Modern Way

async/await is just sugar over Promises. Mark a function async and you can await Promises inside it as if they were plain values:

async function loadUsers() {
  const res = await fetch("/api/users");
  const users = await res.json();
  return users;
}
loadUsers().then(console.log);

Two rules:

1. await only works inside an async function (or top-level in modules). 2. An async function always returns a Promise — even if you return a plain number.

Error Handling with try / catch

async function load() {
  try {
    const res = await fetch("/api/users");
    if (!res.ok) throw new Error(HTTP ${res.status});
    const users = await res.json();
    return users;
  } catch (err) {
    console.error("Failed:", err);
    showToast("Couldn't load users");
  } finally {
    hideSpinner();
  }
}

Important: fetch does not reject on HTTP 404 or 500 — it only rejects on network failure. You have to check res.ok yourself.

The fetch API in 90 Seconds

// GET
const res = await fetch("/api/users");
const users = await res.json();
// POST
const res = await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Asha" }),
});

Beginner Mistakes to Skip

1. Forgetting await — const u = fetch(...) gives you a *Promise object*, not data. 2. Sequential when you could be parallel — three independent await fetches in a row are wasted seconds. Use Promise.all. 3. Forgetting !res.ok — fetch happily resolves on a 500 error. 4. Mixing async with .forEach — array.forEach(async (x) => await thing(x)) does *not* await anything. Use for...of or Promise.all(map(...)). 5. Unhandled rejections — every Promise chain should end in .catch or live inside try/catch.

Intermediate: Running Things in Parallel

If three requests don't depend on each other, fire them at the same time:

// Slow — 3 sequential requests
const a = await fetch("/a");
const b = await fetch("/b");
const c = await fetch("/c");
// Fast — all 3 in flight at once
const [a, b, c] = await Promise.all([
  fetch("/a"),
  fetch("/b"),
  fetch("/c"),
]);

The Promise Combinators

Intermediate: The Event Loop

This is *the* interview question. Predict the output:

console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");
// → 1, 4, 3, 2

Order of operations:

1. Synchronous code runs first on the call stack. 2. After the stack empties, microtasks drain (Promises, queueMicrotask). 3. Then one macrotask runs (setTimeout, I/O). 4. Microtasks drain again, then next macrotask… repeat.

Microtasks always beat setTimeout(..., 0).

Intermediate: Cancelling Async Work

A user clicks "Search", types a new query, and now there are two in-flight requests racing each other. Cancel the first one:

const ctrl = new AbortController();
fetch("/api/search?q=foo", { signal: ctrl.signal })
  .then(/* … */)
  .catch((err) => {
    if (err.name === "AbortError") return; // expected
    throw err;
  });
// Later — abandon it:
ctrl.abort();

The AbortController is also accepted by addEventListener (see the Events topic). One pattern, many uses.

Intermediate: Timeouts

Add a timeout to any fetch using AbortSignal.timeout:

const res = await fetch("/api/slow", {
  signal: AbortSignal.timeout(5000), // give up after 5 s
});

Advanced: Top-Level await

Inside ES Modules you can await directly at the top of a file:

// config.js (a module)
const res = await fetch("/config.json");
export const config = await res.json();

The module's importers wait until that Promise resolves. Use sparingly — it can delay your whole bundle.

Advanced: Async Iterators & for await…of

Stream data piece by piece:

const res = await fetch("/big-file");
for await (const chunk of res.body) {
  process(chunk); // each chunk arrives as it's downloaded
}

Perfect for log streams, AI token-by-token responses, or massive CSVs.

Advanced: Avoiding the Blocked Event Loop

Even async code blocks the page if your *synchronous* JavaScript runs too long (heavy loops, big JSON parsing). Two escape hatches:

1. Yield to the browser with await new Promise(r => setTimeout(r)) between iterations. 2. Move heavy work to a Web Worker — a separate thread with its own event loop, communicating via postMessage. Pure CPU code (parsing, image processing, ML) belongs there.

Advanced: Promise Anti-Patterns

// ❌ The "Promise constructor anti-pattern"
function get() {
  return new Promise((resolve) => {
    fetch("/x").then((r) => resolve(r));
  });
}
// ✅ Just return the existing Promise:
function get() {
  return fetch("/x");
}
// ❌ Swallowed errors
async function load() {
  try { await fetchData(); } catch {}   // silently broken forever
}
// ✅ At least log it
catch (e) { console.error(e); }

Practice Path

1. Convert a chain of three .then calls into one async/await function. 2. Take three sequential await fetches and parallelise them with Promise.all. Time the difference. 3. Build a search input that cancels the previous request whenever the user types again, using AbortController. 4. Predict the output of mixed setTimeout + Promise.then + queueMicrotask snippets, then run them and confirm.