Fetch API in JavaScript: La Guida Completa per Effettuare Richieste HTTP

La Fetch API è un’interfaccia moderna e flessibile per effettuare richieste HTTP in JavaScript. Introdotta come alternativa più potente rispetto a XMLHttpRequest, la Fetch API fornisce un modo più intuitivo per gestire le operazioni di rete asincrone, permettendo di inviare richieste e ricevere risposte in formato JSON, testo, o altre tipologie di dati. In questo articolo, esploreremo come utilizzare la Fetch API, come gestire le risposte e gli errori, e le best practices per lavorare con le operazioni asincrone.

Cos’è la Fetch API?

La Fetch API fornisce un’interfaccia JavaScript per accedere e manipolare le parti del protocollo HTTP, come le richieste e le risposte. È costruita intorno all’uso delle Promises, che semplifica la gestione delle operazioni asincrone rispetto all’uso di XMLHttpRequest.

Esempio di Base

fetch("https://api.example.com/dati")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Errore nella richiesta:", error));

In questo esempio, fetch invia una richiesta GET all’URL specificato. La prima .then() converte la risposta in JSON e la seconda .then() gestisce i dati ricevuti. Il blocco .catch() cattura eventuali errori.

Sintassi della Fetch API

La sintassi della Fetch API è semplice e si basa principalmente su due argomenti: l’URL della risorsa e un oggetto di configurazione opzionale.

Effettuare una Richiesta GET

Una richiesta GET è la richiesta predefinita che fetch effettua.

fetch("https://api.example.com/dati")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Errore nella risposta: " + response.status);
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("Errore:", error));

Effettuare una Richiesta POST

Per inviare dati a un server, puoi effettuare una richiesta POST utilizzando l’oggetto di configurazione.

fetch("https://api.example.com/invia", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    nome: "Mario",
    eta: 30,
  }),
})
  .then((response) => {
    if (!response.ok) {
      throw new Error("Errore nella risposta: " + response.statusText);
    }
    return response.json();
  })
  .then((data) => console.log("Risposta dal server:", data))
  .catch((error) => console.error("Errore:", error));

Opzioni di Configurazione

L’oggetto di configurazione della Fetch API può contenere diverse opzioni:

• method: Specifica il metodo HTTP (GET, POST, PUT, DELETE, etc.).
• headers: Oggetto che contiene gli header HTTP da inviare con la richiesta.
• body: Il corpo della richiesta, spesso usato con metodi come POST o PUT.
• mode: Indica la modalità della richiesta, ad esempio 'cors', 'no-cors', o 'same-origin'.
• credentials: Include le credenziali (cookie) con la richiesta, può essere 'same-origin', 'include', o 'omit'.

Esempio Completo di Configurazione

fetch("https://api.example.com/aggiorna", {
  method: "PUT",
  headers: {
    Authorization: "Bearer token",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    nome: "Luigi",
    eta: 25,
  }),
  mode: "cors",
  credentials: "include",
})
  .then((response) => response.json())
  .then((data) => console.log("Dati aggiornati:", data))
  .catch((error) => console.error("Errore:", error));

Gestione delle Risposte

La Fetch API non considera una richiesta completata come un errore anche se il server restituisce un codice di errore HTTP (come 404 o 500). Devi controllare manualmente la proprietà ok della risposta.

Controllare lo Stato della Risposta

fetch("https://api.example.com/resource")
  .then((response) => {
    if (!response.ok) {
      throw new Error("HTTP error! Status: " + response.status);
    }
    return response.json();
  })
  .then((data) => console.log("Dati ricevuti:", data))
  .catch((error) => console.error("Errore nella richiesta:", error));

Parsing delle Risposte

La Fetch API supporta diversi metodi per il parsing delle risposte:

• response.json(): Converte la risposta in un oggetto JavaScript.
• response.text(): Restituisce il corpo della risposta come stringa.
• response.blob(): Restituisce il corpo della risposta come oggetto Blob, utile per file come immagini.
• response.arrayBuffer(): Restituisce il corpo della risposta come ArrayBuffer, utile per manipolare dati binari.

fetch("https://api.example.com/testo")
  .then((response) => response.text())
  .then((text) => console.log(text));

Gestione degli Errori

Gestire correttamente gli errori è fondamentale per garantire che l’applicazione reagisca bene in caso di problemi di rete o risposte del server.

Catching degli Errori

Il blocco .catch() cattura tutti gli errori nella catena delle Promises, inclusi quelli generati dal fetch stesso o dalle operazioni su di esso.

fetch("https://api.example.com/dati")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Errore nella richiesta:", error));

Timeout delle Richieste

La Fetch API non supporta nativamente i timeout. Tuttavia, puoi implementare un timeout utilizzando Promises e setTimeout.

function fetchConTimeout(url, opzioni, timeout = 8000) {
  return Promise.race([
    fetch(url, opzioni),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error("Richiesta scaduta")), timeout)
    ),
  ]);
}

fetchConTimeout("https://api.example.com/lenta", {}, 5000)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Errore o timeout:", error));

Usare async/await con Fetch

L’uso di async/await semplifica la gestione delle operazioni asincrone con Fetch, migliorando la leggibilità del codice.

Esempio di async/await con Fetch

async function fetchDati() {
  try {
    let response = await fetch("https://api.example.com/dati");
    if (!response.ok) {
      throw new Error("Errore HTTP! Status: " + response.status);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Errore nella richiesta:", error);
  }
}

fetchDati();

Best Practices per l’Uso di Fetch

• Gestisci Sempre gli Errori: Usa .catch() o try...catch per gestire gli errori di rete o di parsing.
• Convalida le Risposte del Server: Controlla lo stato della risposta (response.ok) per gestire correttamente gli errori HTTP.
• Usa Headers per la Sicurezza: Imposta headers appropriati, come Content-Type e Authorization, per proteggere le tue richieste.
• Considera le Performance: Limita il numero di richieste simultanee o utilizza tecniche di caching per migliorare le performance.

Conclusione

La Fetch API è uno strumento potente e flessibile per effettuare richieste HTTP in JavaScript. Con il supporto per Promises, la gestione delle risposte e la sintassi semplice, Fetch rende le operazioni di rete più facili e leggibili rispetto al passato. Comprendere come utilizzare Fetch, gestire le risposte e catturare gli errori ti permetterà di creare applicazioni web più robuste e interattive.