The fetch API

Now the payoff: using async skills to get real data from the internet. The fetch function is JavaScript's built-in way to make HTTP requests to servers and APIs. It returns a promise, so everything you've learned about promises and async/await applies directly. This is how modern web apps load their data.

fetch returns a promise

fetch(url) sends a request to that URL and returns a promise that resolves to a response object. You then call response.json() (which also returns a promise) to parse the body. This is real data from a public test API — run it. Because fetch is promise-based, you use .then/.catch (or async/await) exactly as you've learned.

fetch with async/await (cleaner)

With async/await, fetching reads cleanly top-to-bottom: await fetch(...) for the response, await response.json() for the parsed data, wrapped in try/catch for errors. This is the modern standard for data fetching — and it's just your async/await skills applied to fetch. Note the two awaits: one for the response, one for parsing its JSON body.

Why two steps (response, then .json())

A subtlety: fetch resolves as soon as the response headers arrive — but the body might still be downloading. So fetch gives you a response object, and you call .json() (or .text()) to read and parse the body, which is itself async (returns a promise). Hence two steps:

The response object has useful info (status, ok, headers) before you read the body. Then .json() reads and parses the body into a JavaScript object. Understanding this two-step nature (get response → read body) explains why you always see await fetch(...) followed by await response.json().

fetch basics summary

The everyday pattern: await fetch(url) → await response.json() → use the data. By default, fetch makes a GET request (retrieving data). You can configure it for other methods (POST to send data — a later lesson) and add headers, but a plain fetch(url) for reading data is what you'll use most.

The mistake beginners make

Forgetting the second step — trying to use the data straight from fetch's response without .json() (the response isn't the data; you must parse the body). Also, forgetting that .json() is also async (needs its own await or .then). And not handling errors (fetch can fail — wrap in try/catch). Remember the two steps: await fetch(url) gives the response; await response.json() gives the data. And handle failures, since network requests are unreliable.

Your turn

Your turn

1. Use fetch(url) to make an HTTP request — it returns a promise (use .then or async/await).
2. Follow the two steps: await fetch(url) for the response, then await response.json() for the data.
3. Inspect the response (status, ok) and wrap fetching in try/catch for errors.

Key points

• fetch(url) makes an HTTP request and returns a PROMISE — use your promise / async-await skills with it.
• It's two steps: await fetch(url) gives the RESPONSE object; await response.json() reads and parses the body into data.
• fetch resolves when headers arrive (so response has status/ok before the body); .json() is itself async.
• By default fetch does a GET; always handle errors (try/catch) since network requests can fail.