Async and fetch

Network requests take time. Promises let the browser keep painting while you wait. async/await makes that flow read like synchronous code.

async function loadCourses() {
  try {
    const response = await fetch("/api/courses");
    if (!response.ok) {
      throw new Error(`Request failed: ${response.status}`);
    }
    const courses = await response.json();
    return courses;
  } catch (error) {
    console.error("Could not load courses", error);
    return [];
  }
}

1. 01
   Start loading

   Show a skeleton or spinner immediately so the interface never feels frozen.

2. 02
   Await the response

   fetch only rejects on network failure — check response.ok for 4xx and 5xx.

3. 03
   Parse once

   Call response.json() exactly once. The body stream can only be consumed once.

4. 04
   Handle both paths

   Render the data or a clear, actionable error. Never leave a permanent spinner.