Calling the API with fetch

What fetch does

fetch(url, options) is built into every modern browser (and into Node.js). It sends one HTTP request and gives back a Promise: a value that arrives later. With await you wait for it and get a Response object, which holds the status code, the headers and the body.

const res = await fetch('/api/notes');
console.log(res.status); // 200
const data = await res.json(); // { notes: [...] }
console.log(data.notes.length);

Sending JSON to the API

const res = await fetch('/api/notes', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Physics formulas', body: 'V = IR', pinned: true }),
});
const note = await res.json(); // the new note, status 201

• method: GET is the default. Write POST, PATCH or DELETE yourself.
• headers: Content-Type: application/json tells Express that the body is JSON. Without it, express.json() skips the body and req.body stays empty.
• body: a string. Passing a plain object sends the text "[object Object]", which is a common beginner bug.

fetch does not reject on 404 or 500

fetch rejects (throws when you await it) only when no answer arrives at all: the network is down, the server name cannot be found, the browser blocks the request, or you cancel it. For any answer from the server, even 404 or 500, fetch succeeds. You must check res.ok (true for status 200 to 299) or res.status yourself.

Reading the contract's error shape

Our Notes API answers every error as { "error": { "code": "...", "message": "..." } }. The client reads error.code to decide what to do (for example UNAUTHORIZED means go to login) and shows error.message to the person. Because the shape is always the same, one piece of code handles every error.

One API client for every screen

An API client is a small file with one function that every screen uses to talk to the server. It is the one place for the base URL, the JSON headers, cookies and error handling. If something changes later, you change one file instead of twenty components.

// src/api.js
const BASE = import.meta.env.VITE_API_URL ?? '/api';

export async function api(path, { method = 'GET', body } = {}) {
  const init = { method, credentials: 'include' };
  if (body !== undefined) {
    init.headers = { 'Content-Type': 'application/json' };
    init.body = JSON.stringify(body);
  }
  const res = await fetch(BASE + path, init);
  if (res.status === 204) return null;
  if (res.ok) return res.json();
  let data = null;
  try { data = await res.json(); } catch { /* not JSON */ }
  const error = new Error(data?.error?.message ?? 'Request failed with status ' + res.status);
  error.status = res.status;
  error.code = data?.error?.code ?? 'HTTP_ERROR';
  throw error;
}

// In a component:
// const { notes } = await api('/notes');
// const note = await api('/notes', { method: 'POST', body: { title } });

Many teams use a small library such as ky or axios instead of writing this file. They do the same jobs: JSON, base URL and throwing on bad status codes. Writing it yourself once shows you what those libraries do.