Fetch API di JavaScript

La Fetch API è un'interfaccia moderna in JavaScript che permette di inviare richieste HTTP (come richieste web) e gestire risposte da server. È utilizzata per comunicare con API esterne, caricare dati da un file o inviare informazioni a un server.

In breve, puoi utilizzare Fetch per:

La sintassi di base

La sintassi di Fetch in JavaScript è molto semplice e rimane quasi invariata per ogni tipo di richiesta: ti basta scriverla una volta e poi riutilizzarla con un semplice copia-incolla.

fetch(url)
  .then(response => {
    response.text();
  })
  .then(data => {
    // data contiene i dati ricevuti
  })
  .catch(error => {
    // error contiene il tipo di errore
  });

La funzione fetch(URL) invia una richiesta ad un file specificato (più nello specifico, si tratta di una richiesta HTTP di tipo GET). 

L'oggetto response contiene informazioni sulla risposta HTTP, come lo stato della richiesta (es. 200 OK, 404 Not Found) e i dati inviati dal server. 

L'informazione più importante si trova in data, che è il risultato della conversione del corpo della risposta (contiene, quindi, i dati ricevuti, che devono essere precedentemente convertiti attraverso response.json() o response.text()). 

L'oggetto error viene passato a .catch() quando si verifica un errore.

Utilizzare Fetch

Ora possiamo inserire nella stessa cartella dove si trova il file HTML, collegato allo script JavaScript, un semplice file di testo (file.txt) che contenga una parola o una frase. Con JavaScript, puoi recuperare il contenuto di questo file senza ricaricare la pagina usando la Fetch API, evitando così interruzioni per l'utente e migliorando l'esperienza di navigazione.

const file = "file.txt";

fetch(file)
  .then(response => {
    // Verifica se la richiesta è andata a buon fine (status 200)
    if (!response.ok) {
      throw new Error(`Errore: ${response.status}`);
    }
    response.text();
  })
  .then(data => {
    document.write(data);
  })
  .catch(error => {
    console.error("Impossibile caricare il file:", error);
  });

In questo esempio, andiamo a recuperare il contenuto del file di testo chiamato file.txt. Ecco cosa succede, passo dopo passo:

Funzioni asincrone 

Tutte le richieste tramite Fetch sono asincrone. Le richieste asincrone sono operazioni che si svolgono in background, senza bloccare l'esecuzione del resto del codice JavaScript.

Tuttavia, possiamo anche creare delle funzioni asincrone con la sintassi più comune function funzione (){...}, che abbiamo visto nella lezione delle Funzioni.

A questo scopo, dobbiamo utilizzare async e await.

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Errore HTTP: ${response.status}`);
    }
    const data = await response.json();
    console.log("Dati ricevuti:", data);
  } catch (error) {
    console.error("Errore durante la richiesta:", error);
  }
}

fetchData("file.txt");

La differenza principale tra l’uso normale di Fetch con .then() e l’uso di async e await sta nello stile di scrittura del codice, non nel risultato finale: il funzionamento rimane lo stesso.

Creare una funzione fetchData(), come nell’esempio, può essere molto utile: permette di eseguire diverse richieste Fetch cambiando solo il nome del file, senza dover riscrivere ogni volta l’intera catena di .then(). Una volta creata la funzione, possiamo eseguirla più volte:

fetchData("file1.txt");
fetchData("file2.txt");
fetchData("file3.txt");

Nell'esempio, verrà eseguita una richiesta Fetch a file1.txt, poi a file2.txt e a file3.txt, utilizzando la stessa funzione.

Opzioni di Fetch

Quando utilizziamo fetch per fare richieste HTTP, possiamo passare un secondo parametro sotto forma di oggetto, che contenga le informazioni per effettuare la richiesta al file.

Il "method"

La proprietà method è fondamentale per indicare il tipo di operazione che vogliamo compiere sul server. I metodi HTTP più comuni sono:

fetch("file.txt", {
  method: "POST"
})
.then(response => response.text())
.then(data => document.write(data));

Gli "header"

Gli header sono coppie chiave-valore che forniscono informazioni sulla richiesta HTTP, come il tipo di formato dei dati.

L'uso degli header permette al server di capire come processare la richiesta. Puoi aggiungere header in questo modo:

fetch("/api", {
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.json())
.then(data => document.write(data));

Il "body"

La proprietà body contiene i dati effettivi che vengono inviati al server. Il body deve essere formattato come una stringa. Per questo motivo, i dati sotto forma di oggetti (solitamente in formato JSON) devono essere convertiti in stringa, utilizzando JSON.stringify().

Ad esempio, se un utente compila un form e vogliamo salvare i dati in un database, possiamo inviarli a un file API (Application Programming Interface), cioè un file che riceve dati e restituisce una risposta.

const utente = {
  name: "Mario Rossi",
  email: "[email protected]"
};

fetch("/api", {
  method: "POST",
  body: JSON.stringify(utente),
  headers: {
    "Content-Type": "application/json"
  }
})
.then(response => response.json())
.then(data => console.log("Utente creato: ", data));

L'API riceve in ingresso i dati contenuti nell'oggetto utente e li elabora.

Nuovo elemento text

Esempio di richiesta ad un'API

Vediamo ora un esempio di Fetch per richiedere dati ad un'API, che recupera i dati del post con id pari a 1. Questo è un esempio perfetto di richiesta GET, in quanto stiamo solo leggendo dati senza modificarli. Utilizziamo un'API pubblica, ospitata su un sito web esterno.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => {
    if (!response.ok) {
      throw new Error("Errore di rete o server non raggiungibile");
    }
    return response.json();
  })
  .then(data => {
    // "data" contiene l'oggetto JSON del post.
    console.log("Dati del post:", data);
    console.log("Titolo:", data.title);
    console.log("Corpo:", data.body);
  })
  .catch(error => {
    console.error("Si è verificato un errore:", error);
  });