Come gestire le richieste API con Fetch in JavaScript

Introduzione

Le API (Application Programming Interface) sono uno strumento fondamentale nello sviluppo web moderno. Permettono alle applicazioni di comunicare tra loro, scambiando dati in modo efficiente. In JavaScript, uno dei metodi più comuni per effettuare richieste API è fetch(), un’interfaccia semplice e potente per lavorare con risorse remote.

In questo articolo, esploreremo come utilizzare fetch() per inviare richieste HTTP, gestire le risposte e lavorare con i dati ricevuti.

Cos’è fetch()?

fetch() è una funzione nativa di JavaScript che permette di effettuare richieste HTTP asincrone. Restituisce una Promise che risolve l’oggetto Response rappresentante la risposta della richiesta.

La sintassi base è:

fetch(url, options)
  .then(response => {
    // Gestire la risposta
  })
  .catch(error => {
    // Gestire l'errore
  });

• url: L’indirizzo dell’API a cui stai facendo la richiesta.
• options: Un oggetto opzionale per configurare il metodo (GET, POST, ecc.) e altri parametri.

Esempio di una richiesta GET

Il metodo più comune è la richiesta GET, utilizzata per ottenere dati da un’API. Ecco un esempio di base:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('Errore nella richiesta');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // Visualizza i dati ricevuti
  })
  .catch(error => {
    console.error('Si è verificato un errore:', error);
  });

Esempio di una richiesta POST

Le richieste POST vengono utilizzate per inviare dati a un’API. Ecco un esempio di come inviare dati JSON:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Nuovo Post',
    body: 'Questo è il contenuto del post.',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('Post creato:', data);
  })
  .catch(error => {
    console.error('Errore nella creazione del post:', error);
  });

Gestione degli errori

È importante gestire correttamente gli errori nelle richieste API. Oltre al blocco catch, puoi controllare lo stato della risposta con response.ok e response.status.

fetch('https://jsonplaceholder.typicode.com/posts/1000')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Errore ${response.status}: Risorsa non trovata`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Errore:', error);
  });

Utilizzare async/await per una sintassi più pulita

L’uso di async/await rende il codice più leggibile e semplice da gestire:

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Errore nella richiesta');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Errore:', error);
  }
}

getData();

Conclusione

fetch() è uno strumento potente per lavorare con API in JavaScript. Comprendere come inviare richieste, gestire risposte e errori è fondamentale per qualsiasi sviluppatore web. Con queste basi, puoi iniziare a integrare dati esterni nelle tue applicazioni e creare esperienze utente più ricche e dinamiche.

Annullare una richiesta con AbortController

Dal 2024 l’AbortController è la soluzione standard per cancellare richieste fetch in corso — fondamentale in React per evitare aggiornamenti di stato su componenti già smontati:

const controller = new AbortController();

fetch("https://api.example.com/data", {
  signal: controller.signal
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === "AbortError") {
      console.log("Richiesta annullata");
    }
  });

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

fetch() vs Axios nel 2026

fetch() è ora la scelta predefinita per la maggior parte dei progetti: nessuna dipendenza esterna, supporto nativo a AbortController, streaming di response e Request/Response objects riutilizzabili. Axios rimane utile se hai bisogno di interceptors complessi, timeout nativi o supporto a Node.js versioni vecchie. Per nuovi progetti, preferisci fetch.

Best practice per la gestione degli errori con fetch

Un errore comune: fetch() non lancia un’eccezione per errori HTTP (404, 500). La Promise viene risolta anche se il server risponde con un errore. Devi controllare esplicitamente response.ok:

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

// Uso con gestione errori
try {
  const data = await getData("https://api.example.com/users");
  console.log(data);
} catch (err) {
  console.error("Errore:", err.message);
}

Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.