La Fetch API in JavaScript: una guida pratica

La Fetch API è il modo moderno, basato sulle promise, per effettuare richieste HTTP dal browser. Sostituisce il vecchio XMLHttpRequest con un'interfaccia più pulita che funziona naturalmente con async/await e con gli stream. Tutti i browser attuali la supportano.

Una prima richiesta GET

fetch() restituisce una promise che si risolve in un oggetto Response. Per leggerne il JSON, si chiama response.json(), che a sua volta restituisce una promise:

const res = await fetch('https://api.example.com/articles');
const data = await res.json();
console.log(data);

La stessa cosa senza async/await, con catene di .then():

fetch('https://api.example.com/articles')
  .then((res) => res.json())
  .then((data) => console.log(data));

L'insidia: fetch non viene rifiutata sugli errori HTTP

È ciò che sorprende quasi tutti. Una risposta 404 o 500 resta una fetch riuscita — la promise viene rifiutata solo in caso di guasto di rete (offline, DNS, CORS). Devi controllare response.ok da solo:

const res = await fetch(url);
if (!res.ok) {
  throw new Error(`HTTP ${res.status} ${res.statusText}`);
}
const data = await res.json();

Inviare dati con POST

Passa un secondo argomento di opzioni per impostare il metodo, gli header e il corpo. Per il JSON, serializza il payload e imposta il Content-Type:

const res = await fetch('/api/articles', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Ciao', body: 'Mondo' }),
});
const created = await res.json();

Annullare una richiesta

Usa un AbortController per annullare una richiesta — utile per i timeout o quando un componente viene smontato:

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000);

try {
  const res = await fetch(url, { signal: controller.signal });
  const data = await res.json();
} catch (err) {
  if (err.name === 'AbortError') console.log('Richiesta scaduta');
} finally {
  clearTimeout(timeout);
}

Riferimento rapido

Attività	Come
Leggere JSON	await res.json()
Leggere testo	await res.text()
Verificare il successo	res.ok / res.status
Inviare JSON	body: JSON.stringify(...) + Content-Type
Annullare	AbortController + signal

Questo copre i casi quotidiani. La Fetch API supporta anche lo streaming dei corpi delle risposte, gli upload con FormData e la clonazione di richiesta/risposta — ma i pattern qui sopra gestiscono la stragrande maggioranza delle chiamate reali.