Fetch, promises, and async/await

What you will build

Await requests and distinguish network completion from HTTP success.

Understand the idea first

Await requests and distinguish network completion from HTTP success.

Build it step by step

async function loadData(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

1. Open the previous project and record its result.
2. Type the example and complete: Call a public test API and print status, Content-Type, and parsed data.
3. Change one input, predict, then verify.
4. Create and repair: Fetch does not necessarily reject on 404; check response.ok.

Read the important lines

• Await requests and distinguish network completion from HTTP success.
• Read input, processing, and output separately.
• Verify another input and an edge case.

Common mistakes and what to check

Practice without copying

Call a public test API and print status, Content-Type, and parsed data.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases