JavaScript Async/Await & Promises Cheat Sheet: Fetch, Errors & Parallel

A Promise represents a future value. async functions return promises; await pauses that function until the promise settles. Use try/catch around await, check response.ok on fetch, and Promise.all when independent requests can run in parallel.

This JavaScript cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• States: pending → fulfilled or rejected. then / catch / finally.
• async: async function load() always returns a Promise.
• await: Works inside async (or at module top-level in ES modules). Unwraps fulfillment or throws.
• all: Promise.all([a, b]) fails fast if any reject. allSettled waits for every result.
• race: First settled wins. Use for timeouts with care (cancel the loser).
• fetch: await fetch(url) then await res.json(). Network success ≠ HTTP 200.
• Error: Rejected promises become exceptions at await. Unhandled rejections log in the console.
• Microtask: Promise callbacks run before the next macrotask (timeouts, events).

Copy-paste examples

Sequential vs parallel

Two independent awaits in a row wait twice. Start both, then all.

async function loadDashboard(id) {
  const [userRes, statsRes] = await Promise.all([
    fetch('/api/user.php?id=' + encodeURIComponent(id)),
    fetch('/api/stats.php?id=' + encodeURIComponent(id)),
  ]);
  if (!userRes.ok || !statsRes.ok) throw new Error('Dashboard failed');
  const user = await userRes.json();
  const stats = await statsRes.json();
  return { user, stats };
}

Timeout helper

Aborting fetch is cleaner than Promise.race leaving a request hanging.

async function fetchJson(url, { ms = 8000 } = {}) {
  const ctrl = new AbortController();
  const t = setTimeout(() => ctrl.abort(), ms);
  try {
    const res = await fetch(url, { signal: ctrl.signal });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    return await res.json();
  } finally {
    clearTimeout(t);
  }
}

Common mistakes

• Forgetting await and logging a Promise object.
• Assuming fetch throws on 404 — it only throws on network failure unless you check ok.
• Awaiting in a forEach callback (it will not wait). Use for...of or map + Promise.all.
• Swallowing errors with empty catch so the UI hangs on a spinner.

FAQ

1. Callback hell vs promises? Promises chain; async/await reads like sync code. You still need error paths and cancellation.

1. When should I use then instead of await? In non-async callbacks or when you want to return a chain. Inside async, prefer await.

1. Is async code multi-threaded? No. JavaScript is single-threaded; the event loop runs callbacks. Web Workers are a separate thread if you need CPU parallelism.

Related JavaScript cheat sheets

• Javascript Cheat Sheet 2026
• Javascript Array Methods Cheat Sheet
• Javascript String Methods Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.