⌛ Fetch API & Async/Await

Chapter: JavaScript — Core to ES6+ · Level ★★★ · Time: 20 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Use fetch with async/awaitHandle errors with try/catchParse JSON responsesRun parallel requests

📚 Quick Recap

🎯 What you'll practice: fetch(), async/await, try/catch, and Promise.all.

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5Errors inside an async function are caught with /catch.

6res.ok is a indicating a successful HTTP status.

7Write an async function that fetches "/api/posts" and returns the parsed JSON.

8Why must you check res.ok before parsing JSON, even though fetch() didn't throw?

9Rewrite two sequential fetch calls as one Promise.all() call.

🚀 Section C · Challenge ● CHALLENGE 5

10Explain the full flow of a React component fetching data: what state variables are needed and how loading/error states change over time.

💭 Reflection — the most useful thing I learned:

A ___/4 B ___/11 C ___/5 Total ___/20 Teacher's Signature Parent's Signature

✂ answer key — fold or cut before handing out

1-B 2-B 3-B 4-A | 5 = try 6 = boolean 7 = async function getPosts(){const res=await fetch('/api/posts');return await res.json();} 8 = fetch() only rejects on network failure, not on HTTP error statuses like 404/500 — res.ok confirms the status was actually in the 200 range before trusting the body 9 = const [a,b] = await Promise.all([fetch('/api/a').then(r=>r.json()), fetch('/api/b').then(r=>r.json())]); | 10 = Needs loading(true initially), data(empty/null initially), and error(null) state; useEffect fires the fetch on mount, sets loading false and data on success, or sets error and loading false on failure — the render checks these three states to show a spinner, the data, or an error message.

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.

🗒 Cheat Sheet

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

🚀 Section C · Challenge ● CHALLENGE 5