mediumFrontend

How does the fetch API work?

Q: How does the fetch API work?

**Core concept (TL;DR).** fetch(url, options) returns a **Promise** that resolves to a Response object. You read the body with another promise-returning method ( .json() , .text() , .blob() ). The big gotcha: fetch only **rejects** on a network failure — an HTTP 404 / 500 still *resolves*, so you must check response.ok yourself. fetch → Response → body (two promises) <text x="90" y="70" fill="#3b82f6" font

1.1k views

Understand the problem

Explain fetch.

fetch

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

GET, error-check, and POST JSON

// GET with proper error handling (fetch won't reject on 404/500!)
async function getUser(id) {
  const res = await fetch("/api/users/" + id);
  if (!res.ok) throw new Error("HTTP " + res.status); // must check ok
  return res.json();                                    // body parse is async
}

// POST JSON
async function createUser(data) {
  const res = await fetch("/api/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
  return res.json();
}

// cancel with AbortController
const ctrl = new AbortController();
fetch("/slow", { signal: ctrl.signal });
ctrl.abort();

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Explain 'this' keyword in JavaScript.

When should you use Map and Set over objects and arrays?