Fetch and async/await
📚 What is Fetch? fetch() is the modern browser API for making HTTP requests to servers and APIs. It returns a Promise, so you use async/await to handle the result cleanly. fetch() is how JavaScript apps talk to the web: loading data, submitting forms, calling AI APIs.
Appy Says…
The Fetch API is how your JavaScript talks to the internet. Weather apps, music players, social feeds — they all use fetch() under the hood. Once you know this, you can pull live data from any API on the web.
What is the Fetch API?
The Fetch API is a browser-built-in function for making HTTP requests. It returns a Promise — so you use async/await to wait for the response.
- •Basic GET:
const res = await fetch(url); - •Parse JSON:
const data = await res.json(); - •Check success:
if (!res.ok) throw new Error('HTTP ' + res.status); - •POST with body:
fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) - •Always wrap in
try/catch— networks fail - •
res.status— HTTP status code (200 = OK, 404 = Not Found, 500 = Server Error)
Think of it like sending a letter and waiting for a reply
Fetch is like sending a request letter to a server (the post office). You wait for the reply to arrive (await), open the envelope (res.json()), and read the contents (the data object). If the letter gets lost (network error), you catch it and show a message.
How It Works
- •1.
fetch(url)sends an HTTP GET request and returns a Promise - •2.
awaitpauses until the response headers arrive — the body hasn't loaded yet - •3.
await res.json()reads the body and parses it as JSON — another async step - •4.
res.okistruefor status codes 200–299 - •5. Fetch does NOT reject on HTTP error codes (404, 500) — you must check
res.ok - •6. Network failures (no internet, DNS error) DO cause a rejection — caught by
catch
Real-World Examples
- •Weather app:
fetch('https://api.weather.com/current?city=London') - •Search GitHub users:
fetch('https://api.github.com/users/octocat') - •TikTok's app fetches your personalised feed from their API on every scroll
- •Submit a contact form: POST the form data as JSON to a backend endpoint
- •Spotify's web player fetches track metadata, album art, and lyrics from their API
Key Facts
- •Fetch is built into all modern browsers — no library needed
- •Unlike older
XMLHttpRequest, Fetch uses Promises and is far cleaner - •CORS (Cross-Origin Resource Sharing) can block fetch requests — the server must allow your domain
- •Node.js 18+ includes a built-in
fetch— same API works on the server side
Watch Out!
Fetch does NOT throw on HTTP error codes like 404 or 500. A 404 response is still a resolved Promise. Always check if (!res.ok) throw new Error(res.status) — otherwise your app will try to use error-page HTML as if it were valid data.
Remember
Two awaits: const res = await fetch(url); then const data = await res.json();. Always check res.ok before parsing. Always wrap in try/catch.
What You Learned
- •Fetch sends HTTP requests; use
async/awaitand two awaits to get JSON data - •Fetch doesn't throw on 404/500 — check
res.okand wrap intry/catch - •Unlocks: weather apps, social feeds, search features, any live data from any API
Key Facts
- →Fetch is built into all modern browsers — no library needed
- →Unlike older
XMLHttpRequest, Fetch uses Promises and is far cleaner - →CORS (Cross-Origin Resource Sharing) can block fetch requests — the server must allow your domain
- →Node.js 18+ includes a built-in
fetch— same API works on the server side
Real-World Examples
Remember
Two awaits: const res = await fetch(url); then const data = await res.json();. Always check res.ok before parsing. Always wrap in try/catch.
Quick Quiz
fetch() returns?