fetch() è la funzione moderna di JavaScript per comunicare con server e API. Con essa puoi recuperare dati, inviarli, gestire risposte JSON e lavorare in modo asincrono senza ricaricare la pagina.
Cos’è fetch()
La funzione fetch() viene usata per fare richieste HTTP in JavaScript. Rispetto alle vecchie tecniche come XMLHttpRequest, ha una sintassi più pulita e restituisce una promessa, quindi si integra bene con then() e async/await.developers.
Un esempio molto semplice è questo:
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
In questo caso, JavaScript invia una richiesta al server, riceve la risposta e la converte in JSON.
Come funziona
fetch() restituisce un oggetto di risposta, non direttamente i dati. Per ottenere i contenuti, di solito bisogna prima verificare la risposta e poi chiamare response.json() se il formato è JSON.
Ecco il flusso base:
- invii la richiesta;
- ricevi la risposta;
- controlli se la risposta è valida;
- trasformi i dati nel formato che ti serve.
Esempio con async/await
Questo stile è spesso più leggibile:
async function caricaPost() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
if (!response.ok) {
throw new Error("Errore nella richiesta");
}
const dati = await response.json();
console.log(dati);
} catch (errore) {
console.error("Si è verificato un errore:", errore);
}
}
caricaPost();
Qui response.ok aiuta a intercettare risposte HTTP non corrette, mentre try/catch gestisce eventuali errori.
Richieste GET e POST
fetch() si usa molto per leggere dati con una GET, ma può anche inviare dati con una POST. In quel caso devi specificare il metodo, gli header e il body della richiesta.
GET
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log(data));
POST
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
title: "Nuovo post",
body: "Contenuto di esempio",
userId: 1
})
})
.then(response => response.json())
.then(data => console.log(data));
Nel caso della POST, i dati vengono convertiti in stringa JSON con JSON.
Errore comune da evitare
Un errore frequente è pensare che fetch() dia errore automaticamente quando il server risponde con codice 404 o 500. In realtà, la promessa viene comunque risolta: bisogna controllare manualmente response.ok o response.status.
Questo è importante perché una richiesta può “andare a buon fine” dal punto di vista tecnico, ma restituire comunque una risposta HTTP sbagliata.
Esempio pratico per il blog
Se vuoi mostrare un elenco di dati nel sito, fetch() è perfetto. Ad esempio puoi prendere un array di post da un’API e stamparli nella pagina:
async function mostraPost() {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const post = await response.json();
const lista = document.getElementById("lista-post");
lista.innerHTML = post
.slice(0, 5)
.map(item => `<li>${item.title}</li>`)
.join("");
}
mostraPost();
Questo tipo di esempio è ottimo per un articolo tecnico perché è semplice, utile e subito applicabile.
Conclusione
fetch() è uno degli strumenti più importanti di JavaScript moderno. Ti permette di lavorare con API in modo chiaro, flessibile e più elegante rispetto alle tecniche più vecchie. Se vuoi creare siti dinamici, form interattivi o pagine che leggono dati esterni, impararlo è quasi obbligatorio.