fetch, JSON și AbortController

Ce este fetch

fetch e funcția nativă (în browser, Node și Next) pentru a face request-uri HTTP: ceri date de la un server sau trimiți date spre el. Returnează un Promise cu un obiect Response.

const res = await fetch('/api/posts')
const posts = await res.json()

Două await: primul așteaptă headerele răspunsului, al doilea citește și parsează body-ul.

Capcana nr. 1: fetch nu aruncă la 404 / 500

fetch aruncă eroare doar la probleme de rețea (offline, DNS, CORS). Un răspuns 404 sau 500 e, pentru el, un răspuns valid.

const res = await fetch('/api/posts')
if (!res.ok) throw new Error(`HTTP ${res.status}`)   // res.ok = status 200–299
const posts = await res.json()

Obiectul Response

Body-ul se poate citi o singură dată.

Tipuri de request-uri

await fetch('/api/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Salut' }),
})

Ce este JSON

JSON (JavaScript Object Notation) e formatul text în care circulă datele între browser și server. Arată ca un obiect JS, dar e string, cu reguli stricte: chei între ghilimele duble, fără funcții, fără undefined, fără virgulă la final.

JSON.stringify({ a: 1, d: new Date() })  // '{"a":1,"d":"2026-10-08T..."}' — Date devine string
JSON.parse('{"a":1}')                    // { a: 1 } — aruncă SyntaxError la JSON invalid

URL-uri cu parametri

const url = new URL('/api/search', location.origin)
url.searchParams.set('q', 'next js')   // encodare automată: q=next+js
url.searchParams.set('page', '2')
fetch(url)

Nu concatena manual — caractere precum &, ?, spațiu strică URL-ul.

Anulare și timeout cu AbortController

Un request vechi care răspunde după unul nou (căutare la tastare) poate suprascrie rezultatul corect — o race condition. Soluția: anulezi request-ul vechi.

const controller = new AbortController()
fetch(url, { signal: controller.signal })
controller.abort()                                  // request-ul aruncă AbortError

fetch(url, { signal: AbortSignal.timeout(5000) })   // anulare automată după 5s

Un helper scris o singură dată

async function api(path, init) {
  const res = await fetch(path, init)
  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`)
  return res.status === 204 ? null : res.json()
}

fetch în Next.js

În Server Components, fetch rulează pe server (cheile API rămân secrete). În Client Components, pentru date de server, preferă TanStack Query în loc de fetch în useEffect.

Pe scurt

• fetch → Response; verifică res.ok, apoi res.json().
• JSON = text; stringify la trimitere, parse (sau res.json()) la primire.
• URL + searchParams pentru parametri; AbortController pentru anulare.

Surse oficiale

• MDN — Using the Fetch API
• MDN — Response
• MDN — Working with JSON
• MDN — AbortController