Fetch in JavaScript: richieste API senza codice superfluo

In JavaScript, fetch è una possibilità integrata per inviare richieste API mantenendo il codice ordinato. Oltre alla soluzione standard GET per la richiesta di dati, l’API può essere usata anche per inviare, modificare ed eliminare dati.

Che cos’è fetch in JavaScript e per cosa è usato?

JavaScript fetch è una possibilità per creare richieste API con promise. Questo tipo di interazione impedisce che il codice diventi confuso, offrendo anche molte altre funzioni. JavaScript fetch invia una richiesta a un server desiderato e la esegue in background. Come funziona e quali possibilità offre l’API fetch? Te lo spieghiamo nei paragrafi seguenti.

I vantaggi di un oggetto promise

Per comprendere il funzionamento di fetch in JavaScript dobbiamo dare uno sguardo agli oggetti promise. Introdotti con JavaScript ES6, servono per permettere e facilitare lo svolgimento di operazioni asincrone. Come suggerisce il nome, un oggetto promise è una sorta di promessa: se è soddisfatta (il codice funziona), si ottiene un valore. Se la promessa non viene mantenuta, la risposta è un oggetto errore. In sostituzione o a integrazione di una callback, le promise rendono i processi asincroni più affidabili e migliorano la leggibilità del codice.

Le promise possono avere gli stati “pending” (in sospeso), “fulfilled” (soddisfatto) o “rejected” (respinto).

• pending: l’operazione non è ancora stata né eseguita né annullata.
• fulfilled: l’operazione è stata eseguita correttamente.
• rejected: l’operazione è fallita.

Nel caso di “fulfilled” e “rejected” è possibile reagire con metodi come then() oppure catch(). Servendosi di queste possibilità, JavaScript fetch usa le promise per eseguire una richiesta XHR a un server.

Il funzionamento di fetch in JavaScript

La sintassi di base di fetch in JavaScript si spiega velocemente. Si presenta come segue:

fetch()

Il metodo può considerare due argomenti: un URL che viene inserito con virgolette tra due parentesi o un oggetto con opzioni che però non deve essere utilizzato (sarà poi usato nell’istruzione vera e propria).

Per spiegare meglio il funzionamento e la struttura, ricorriamo al codice di esempio seguente:

fetch(url)
.then(function() {
})
.catch(function() {
});

Nel primo passaggio inseriamo come parametro l’URL dell’API teorica. Segue il metodo promise then(), che viene esteso di una funzione. Deve essere eseguito quando promise restituisce la variabile resolve. Questa variabile è usata per dichiarare che un’azione è stata eseguita correttamente. La funzione di then() contiene il codice necessario per gestire i dati ricevuti dalla API.

Sotto abbiamo usato il metodo catch(), richiamato quando viene restituita la variabile reject (quando non è possibile eseguire l’API o si verificano altri errori). In questo caso la funzione viene eseguita all’interno di catch(). Bastano quindi tre righe per essere pronti a qualsiasi eventualità ed è possibile avviare richieste API con JavaScript fetch.

Richieste GET con fetch in JavaScript

Puoi usare fetch in JavaScript per richiamare dati da una API. Nell’esempio di seguito eseguiamo una richiesta GET, che è l’impostazione predefinita di fetch in JavaScript. Ora inseriamo di nuovo un URL di esempio. Risponderà con una promise a cui applichiamo il metodo then(). Convertiamo quindi la risposta del server in un oggetto JSON, dopodiché usiamo di nuovo un metodo then() per visualizzare i dati ottenuti nella console. Un codice adatto per l’operazione potrebbe essere come segue:

fetch("https://urldiesempio.com/api")
.then((response) => response.json())
.then((json) => console.log(json));

Inviare dati con POST

Anche se la richiesta GET è lo standard, con fetch di JavaScript puoi anche eseguire operazioni POST, che sono usate per inviare dati. Prima dobbiamo di nuovo indicare l’URL desiderato. Dopodiché usiamo la chiave method per definire il tipo di richiesta, che nel nostro caso ha il valore “POST”. Seguono altre due chiavi obbligatorie: body e headers.

body definisce i dati da inviare al server. Nel nostro caso la chiave è costituita dai parametri title e body. Usiamo anche JSON.stringify per convertire i dati in una stringa. headers è impiegato per definire il tipo di dati da inviare al server. Nel nostro caso si tratta di dati JSON e scegliamo la codifica predefinita UTF-8. Devono essere definite entrambe le chiavi per una richiesta POST. Per il nostro esempio sopra, ora il codice si presenterebbe come segue:

fetch("https://urldiesempio.com/api", {
	method: "POST",
	body: JSON.stringify({
		title: "Qui va inserito il titolo",
		body: "Qui va inserito il contenuto",
	}),
	headers: {
		"Content-type": "application/json; charset=UTF-8",
	},
})
.then((response) => response.json())
.then((json) => console.log(json));

Aggiornare gli oggetti con PUT o PATCH

Con una richiesta PUT o PATCH è possibile aggiornare completamente un oggetto. Questa operazione può essere eseguita anche con fetch di JavaScript. La procedura è simile all’esempio sopra. Ci deve quindi sempre essere un’opzione body con stringa o JSON.stringify; indichiamo il tipo di contenuto tramite application/json. Di seguito il codice del nostro esempio:

fetch("https://urldiesempio.com/api", {
	method: "PUT",
	body: JSON.stringify({
		title: "Qui va inserito il titolo",
		body: "Qui va inserito il contenuto",
	}),
	headers: {
		"Content-type": "application/json; charset=UTF-8",
	},
})
.then((response) => response.json())
.then((json) => console.log(json));

Al posto di PUT è possibile usare anche PATCH.

Rimuovere oggetti con DELETE

Se vuoi usare fetch in JavaScript per eliminare un oggetto, puoi usare una richiesta DELETE. Se necessario puoi anche ricorrere al metodo then(). Di seguito un esempio:

fetch("https://urldiesempio.com/api", {
    method: "DELETE",
})
.then(() => {
    element.innerHTML = "Rimosso";
})
.catch((error) => {
    console.error('Errore nella richiesta:', error);
});