Async JavaScript

Network requests, timers, and many browser APIs finish later. Promises represent that future result; async and await let code describe the sequence directly.

Await a promise

01async function loadCourses() {
02  const response = await fetch("/api/courses");
03  if (!response.ok) {
04    throw new Error(`Request failed: ${response.status}`);
05  }
06  return response.json();
07}

fetch resolves even for HTTP errors such as 404 or 500, so check response.ok. Parsing JSON is also asynchronous.

Handle loading and failure

01async function showCourses() {
02  setStatus("loading");
03  try {
04    const courses = await loadCourses();
05    renderCourses(courses);
06    setStatus("ready");
07  } catch (error) {
08    console.error(error);
09    setStatus("error");
10  }
11}

Model loading, empty, success, and failure states. A caught error should lead to useful feedback or recovery, not disappear silently.

Run independent work together

01const [profile, progress] = await Promise.all([
02  fetchProfile(),
03  fetchProgress(),
04]);

Use Promise.all when all operations are required and independent. Cancel stale fetches with AbortController when a view changes or a new search replaces the old one.

Keep this

Check HTTP status, represent every UI state, run independent work concurrently, and surface failures intentionally.