Stop 03 · HTML, CSS & JavaScript EssentialsTopics · 10/11

Fetch API

Part of the Full Stack Developer Roadmap

In short

Your page needs data from a server: courses, results, cricket scores. fetch is the built-in way to ask for it without reloading the page.

The browser's built-in, Promise-based API for making HTTP requests — the fundamental mechanism your frontend uses to talk to your backend's API.

The jaadu mascot relaxes with a phone as a delivery rider arrives with a food parcel.

Think of it like this

Ordering on Swiggy

You place the order and carry on with life. The app says 'on the way', and later the food arrives, or you get a 'restaurant closed' message. fetch works the same: send the request, keep the page running, handle whatever comes back.

Watch it happen

A safe fetch, step by step

Your page

Server

GET /api/courses

1/5fetch sends the request. The page keeps running while it waits, nothing freezes.

The big ideas

What you need to know

It returns a Promise

fetch doesn't block the page. Use await to wait for the response without freezing anything.

Two steps to the data

First you get a Response. Then you read its body with res.json() or res.text(), which is also async.

404 isn't an error to fetch

fetch only rejects on network failure. For 404 or 500 it resolves, so always check res.ok.

Add a timeout

AbortSignal.timeout(5000) cancels a request that hangs, so your loader doesn't spin forever.

See it in code

Walk through the code

1async function getCourses() {2  try {3    const res = await fetch("/api/courses", {4      signal: AbortSignal.timeout(5000),5    });6    if (!res.ok) throw new Error(`Request failed: ${res.status}`);7    return await res.json();8  } catch (err) {9    console.error(err);10    showToast("Couldn't load courses. Try again?");11    return [];12  }13}

1/4Send the request and cancel it automatically if there's no answer within 5 seconds.

Without the res.ok check, a 404 error page would go straight into res.json() and fail with a confusing parsing error.

Save yourself the pain

Common mistakes

Oops

Assuming fetch throws when the server returns 404 or 500.

Do this instead

Check res.ok (or res.status) yourself and throw if it's false.

Oops

Forgetting the Content-Type header when sending JSON.

Do this instead

Add headers: { "Content-Type": "application/json" } and send body: JSON.stringify(data).

Your mission

Build a mini quote loader

~25 min

Quick check

The server replies with status 500. What does a plain await fetch(url) do?

Go deeper

1Fetch data from your own backend API and render it in the DOM or a React component.
2Learn to send a POST request with a JSON body and the correct headers.
3Practice handling both success and error responses from the same `fetch` call.