# 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/che-cose-unapi/) 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. Consiglio L’uso perfetto di GitHub: con [Deploy Now](https://www.ionos.it/hosting/deploy-now "Deploy Now di IONOS") di IONOS distribuisci le modifiche al codice direttamente e puoi seguire i cambiamenti in tempo reale. Scegli la tariffa più adatta alle tue esigenze! ## Il funzionamento di `fetch` in JavaScript La sintassi di base di `fetch` in JavaScript si spiega velocemente. Si presenta come segue: ```javascript 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: ```javascript 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: ```javascript 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: ```javascript 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: ```javascript 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: ```javascript fetch("https://urldiesempio.com/api", { method: "DELETE", }) .then(() => { element.innerHTML = "Rimosso"; }) .catch((error) => { console.error('Errore nella richiesta:', error); }); ``` Consiglio Nella nostra Digital Guide trovi molti altri articoli su questo amato linguaggio di scripting. Ad esempio, [le librerie e i framework JavaScript più conosciuti](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/le-librerie-e-i-framework-javascript-piu-conosciuti/) e una guida per [integrare JavaScript in WordPress](https://www.ionos.it/digitalguide/hosting/blog/integrare-javascript-in-wordpress/). This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/api-fetch-in-javascript/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/api-fetch-in-javascript/) for AI/LLM consumption.