The Fetch API

The Fetch API is the modern, Promise-based way to make HTTP requests from JavaScript — replacing the older, callback-based XMLHttpRequest. A single call to fetch(url) returns a Promise that resolves to a Response object once the server has responded with headers, even before the body has fully arrived.

Because fetch() returns a Promise, it pairs naturally with .then() chains or async/await, and reading the actual response body is itself an additional asynchronous step.

Why it matters

fetch is how a web page talks to a server: loading data, submitting forms, calling APIs. Its biggest surprise is that an error response such as 404 or 500 does not reject the promise, so code that skips the status check happily processes an error page as if it were data.

A Basic GET Request

fetch(url) defaults to a GET request. The resolved Response object doesn't contain the parsed data directly — you call a method like response.json() (or .text(), .blob()) to read and parse the body, and that method also returns a Promise, since reading the full body can take time.

Checking response.ok

A critical detail: fetch()'s Promise only rejects on network failure (like no internet connection or a DNS error) — it does NOT reject for HTTP error statuses like 404 or 500. The response still resolves successfully, just with response.ok === false and response.status set to the error code. Correct code always checks response.ok before treating the response as usable data, and throws manually if it isn't.

Making a POST Request

To send data, pass a second options object specifying the method, headers, and a body. JSON payloads need both JSON.stringify() on the body and a Content-Type: application/json header so the server parses it correctly.

• method — 'GET' (default), 'POST', 'PUT', 'DELETE', etc.
• headers — an object of request headers, e.g. { 'Content-Type': 'application/json' }.
• body — the request payload, typically JSON.stringify(data) for JSON APIs.

Examples

async function getUser(id) {
  const response = await fetch(`https://api.example.com/users/${id}`);

  if (!response.ok) {
    throw new Error(`Request failed with status ${response.status}`);
  }

  const user = await response.json();
  return user;
}

getUser(42)
  .then((user) => console.log('Fetched:', user.name))
  .catch((err) => console.error('Error:', err.message));

// If the server returns 404, response.ok is false and the manual
// throw runs, producing: "Error: Request failed with status 404"

Fetched: Asha Verma

async function createUser(newUser) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newUser),
  });

  if (!response.ok) {
    throw new Error(`Create failed with status ${response.status}`);
  }

  return response.json();
}

createUser({ name: 'Rahul', age: 31 }).then((created) =>
  console.log('Created user with id:', created.id)
);

Created user with id: 108

Exercise

fakeFetch behaves like fetch but needs no network: it resolves with a response object that has ok, status and a json() method. Write getJson, which returns the parsed body when the response is ok and otherwise throws an error whose message is HTTP followed by the status.

Expected output: Asha then HTTP 404

function fakeFetch(url) {
  const found = url === "/users/1";
  return Promise.resolve({
    ok: found,
    status: found ? 200 : 404,
    json: () => Promise.resolve(found ? { name: "Asha" } : {}),
  });
}

async function getJson(url) {
  // TODO: call fakeFetch, throw "HTTP <status>" if the response is not ok,
  //       otherwise return the parsed JSON
}

async function main() {
  const user = await getJson("/users/1");
  console.log(user.name);

  try {
    await getJson("/users/99");
  } catch (error) {
    console.log(error.message);
  }
}

main();

function fakeFetch(url) {
  const found = url === "/users/1";
  return Promise.resolve({
    ok: found,
    status: found ? 200 : 404,
    json: () => Promise.resolve(found ? { name: "Asha" } : {}),
  });
}

async function getJson(url) {
  const response = await fakeFetch(url);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return await response.json();
}

async function main() {
  const user = await getJson("/users/1");
  console.log(user.name);

  try {
    await getJson("/users/99");
  } catch (error) {
    console.log(error.message);
  }
}

main();

Quick quiz

Interview questions