Fetch in Ja­va­Script: richieste API senza codice superfluo

In Ja­va­Script, fetch è una pos­si­bi­li­tà integrata per inviare richieste API man­te­nen­do il codice ordinato. Oltre alla soluzione standard GET per la richiesta di dati, l’API può essere usata anche per inviare, mo­di­fi­ca­re ed eliminare dati.

Che cos’è fetch in Ja­va­Script e per cosa è usato?

Ja­va­Script fetch è una pos­si­bi­li­tà per creare richieste API con promise. Questo tipo di in­te­ra­zio­ne impedisce che il codice diventi confuso, offrendo anche molte altre funzioni. Ja­va­Script fetch invia una richiesta a un server de­si­de­ra­to e la esegue in back­ground. Come funziona e quali pos­si­bi­li­tà offre l’API fetch? Te lo spie­ghia­mo nei paragrafi seguenti.

I vantaggi di un oggetto promise

Per com­pren­de­re il fun­zio­na­men­to di fetch in Ja­va­Script dobbiamo dare uno sguardo agli oggetti promise. In­tro­dot­ti con Ja­va­Script ES6, servono per per­met­te­re e fa­ci­li­ta­re lo svol­gi­men­to di ope­ra­zio­ni asincrone. Come sug­ge­ri­sce il nome, un oggetto promise è una sorta di promessa: se è sod­di­sfat­ta (il codice funziona), si ottiene un valore. Se la promessa non viene mantenuta, la risposta è un oggetto errore. In so­sti­tu­zio­ne o a in­te­gra­zio­ne di una callback, le promise rendono i processi asincroni più af­fi­da­bi­li e mi­glio­ra­no la leg­gi­bi­li­tà del codice.

Le promise possono avere gli stati “pending” (in sospeso), “fulfilled” (sod­di­sfat­to) o “rejected” (respinto).

• pending: l’ope­ra­zio­ne non è ancora stata né eseguita né annullata.
• fulfilled: l’ope­ra­zio­ne è stata eseguita cor­ret­ta­men­te.
• rejected: l’ope­ra­zio­ne è fallita.

Nel caso di “fulfilled” e “rejected” è possibile reagire con metodi come then() oppure catch(). Ser­ven­do­si di queste pos­si­bi­li­tà, Ja­va­Script fetch usa le promise per eseguire una richiesta XHR a un server.

Il fun­zio­na­men­to di fetch in Ja­va­Script

La sintassi di base di fetch in Ja­va­Script si spiega ve­lo­ce­men­te. Si presenta come segue:

fetch()

Il metodo può con­si­de­ra­re due argomenti: un URL che viene inserito con vir­go­let­te tra due parentesi o un oggetto con opzioni che però non deve essere uti­liz­za­to (sarà poi usato nell’istru­zio­ne vera e propria).

Per spiegare meglio il fun­zio­na­men­to e la struttura, ri­cor­ria­mo 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 re­sti­tui­sce la variabile resolve. Questa variabile è usata per di­chia­ra­re che un’azione è stata eseguita cor­ret­ta­men­te. La funzione di then() contiene il codice ne­ces­sa­rio per gestire i dati ricevuti dalla API.

Sotto abbiamo usato il metodo catch(), ri­chia­ma­to quando viene re­sti­tui­ta la variabile reject (quando non è possibile eseguire l’API o si ve­ri­fi­ca­no altri errori). In questo caso la funzione viene eseguita all’interno di catch(). Bastano quindi tre righe per essere pronti a qualsiasi even­tua­li­tà ed è possibile avviare richieste API con Ja­va­Script fetch.

Richieste GET con fetch in Ja­va­Script

Puoi usare fetch in Ja­va­Script per ri­chia­ma­re dati da una API. Nell’esempio di seguito eseguiamo una richiesta GET, che è l’im­po­sta­zio­ne pre­de­fi­ni­ta di fetch in Ja­va­Script. Ora inseriamo di nuovo un URL di esempio. Ri­spon­de­rà con una promise a cui ap­pli­chia­mo il metodo then(). Con­ver­tia­mo quindi la risposta del server in un oggetto JSON, dopodiché usiamo di nuovo un metodo then() per vi­sua­liz­za­re i dati ottenuti nella console. Un codice adatto per l’ope­ra­zio­ne 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 Ja­va­Script puoi anche eseguire ope­ra­zio­ni POST, che sono usate per inviare dati. Prima dobbiamo di nuovo indicare l’URL de­si­de­ra­to. Dopodiché usiamo la chiave method per definire il tipo di richiesta, che nel nostro caso ha il valore “POST”. Seguono altre due chiavi ob­bli­ga­to­rie: body e headers.

body definisce i dati da inviare al server. Nel nostro caso la chiave è co­sti­tui­ta dai parametri title e body. Usiamo anche JSON.stringify per con­ver­ti­re 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 pre­de­fi­ni­ta UTF-8. Devono essere definite entrambe le chiavi per una richiesta POST. Per il nostro esempio sopra, ora il codice si pre­sen­te­reb­be 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));

Ag­gior­na­re gli oggetti con PUT o PATCH

Con una richiesta PUT o PATCH è possibile ag­gior­na­re com­ple­ta­men­te un oggetto. Questa ope­ra­zio­ne può essere eseguita anche con fetch di Ja­va­Script. La procedura è simile all’esempio sopra. Ci deve quindi sempre essere un’opzione body con stringa o JSON.stringify; in­di­chia­mo 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 Ja­va­Script per eliminare un oggetto, puoi usare una richiesta DELETE. Se ne­ces­sa­rio 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);
});