Intermedio15 min

Fetch API

Comunicare con server e API REST usando la Fetch API nativa del browser.

Fetch API

La Fetch API è lo strumento nativo del browser per fare richieste HTTP. Sostituisce il vecchio XMLHttpRequest con un'interfaccia basata su Promises, pulita e moderna.

Richiesta GET

javascript

async function ottieniUtenti() {
  const risposta = await fetch("https://api.esempio.it/utenti");

  if (!risposta.ok) {
    throw new Error(\`Errore HTTP: \${risposta.status}\`);
  }

  const utenti = await risposta.json();
  return utenti;
}

Attenzione: fetch non lancia un errore per risposte 4xx o 5xx — devi controllare risposta.ok manualmente.

Richiesta POST

javascript

async function creaUtente(dati) {
  const risposta = await fetch("https://api.esempio.it/utenti", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(dati),
  });

  return await risposta.json();
}

creaUtente({ nome: "Luca", email: "luca@esempio.it" });

Gestione errori robusta

javascript

async function chiamaAPI(url) {
  try {
    const risposta = await fetch(url);

    if (!risposta.ok) {
      const errore = await risposta.json();
      throw new Error(errore.messaggio || "Errore sconosciuto");
    }

    return await risposta.json();
  } catch (errore) {
    if (errore.name === "TypeError") {
      console.error("Errore di rete:", errore.message);
    } else {
      console.error("Errore API:", errore.message);
    }
    throw errore;
  }
}

Annullare una richiesta

javascript

const controller = new AbortController();

fetch("/api/dati", { signal: controller.signal })
  .then(r => r.json())
  .catch(e => {
    if (e.name === "AbortError") console.log("Richiesta annullata");
  });

// Annulla dopo 5 secondi
setTimeout(() => controller.abort(), 5000);

L'AbortController è fondamentale per annullare richieste quando l'utente naviga via dalla pagina o cambia i filtri di ricerca.