Come usare Fetch API per eseguire chiamate HTTP

In questo articolo vorrei condividere come la Fetch API di Javascript può aiutarci nelle chiamate HTTP in tutta tranquillità.

Fetch API è un’interfaccia nativa che si basa sulle request e sulle response di una Promise. Proprio questa è la differenza principale con le chiamate eseguite attraverso più nota XMLHTTPRequest API.

Fetch API mette a disposizione il metodo fetch() per un oggetto window. Basandosi sulle Promise, saremo in grado di ricevere la risposta ad una chiamata anche se il server risponde con un errore di stato HTTP. In questo modo potremo interagire con gli utenti in base alla disponibilità di poter accedere ad una risorsa.

Provo quindi a farti un esempio generando un errore 404, scrivendo in maniera errata l’url dal quale viene eseguito il fetch

const fetchPosts = () => {
    fetch("https://riefolo.dev/wp-json/wp/v2/postss")
		// Usiamo il metodo .json() per far ritornare
	  	// la response in formato JSON 
        .then( response => response.json())
		// visualizziamo i dati della response in console
  		.then( data => console.log(data) )
  		// in caso la chiamata non vada a buon fine
		// ritorniamo l'errore
  		.catch( error => console.log(error))
}

// inizializziamo fetchPosts
fetchPosts()

In questo caso la chiamata non darà errore perché il server è raggiungibile e ci risponde, quindi il metodo .catch() non sarà invocato.

L’output infatti sarà la risposta del server in formato JSON, con la possibilità di sapere il tipo di errore:

{
  "code": "rest_no_route",
  "message": "Nessun percorso fornisce una corrispondenza tra l'URL el il metodo richiesto.",
  "data": {
    "status": 404
  }
}

A questo punto potremo creare un messaggio ad hoc per l’utente, informando che il server risponde ma la risorsa non è disponibile. Ecco un esempio:

const fetchPosts = () => {
    fetch("https://riefolo.dev/wp-json/wp/v2/postss")
		// Usiamo il metodo .json() per far ritornare
	  	// la response in formato JSON 
        .then( response => response.json())
		// controllo il contenuto della response
  		// se contiene un messaggio di errore informo l'utente
		// altrimenti eseguo la funzione createPost()
  		.then( data => {
			switch (data){
                case data.data && data.data.response === 401 :
                  console.log("Non hai eseguito l'autenticazione.")
                break; 
                case data.data && data.data.response === 403 :
                  console.log("Non hai l'autorizzazione per recuperare i post.")
                break; 
                case data.data && data.data.response === 404 :
                  console.log("Non ho trovato nessun elenco di post da visualizzare.")
                break;
                case data.data && data.data.response === 500 :
                  console.log("Il server non risponde.")
                break; 
                default:
                    data.forEach(post => createPost(post))
            }
    	})
  		// in caso la chiamata non vada a buon fine
		// ritorniamo l'errore
  		.catch( error => console.log(error))
}

const createPost = post => { /* ... */ }

// inizializziamo fetchPosts
fetchPosts()

Di seguito il Pen a disposizione https://codepen.io/GRiefolo/pen/NWzXZdr. Ho preferito utilizzare un ciclo switch ... case perché, nel caso si voglia gestire più risposte da parte del server risulta più performante. Potete tranquillamente utilizzare un if ... else se vi basta controllare i più comuni 404 o 500.

Quello che abbiamo visto è una semplice chiamata di tipo GET, ma Fetch API permette di eseguire anche chiamate POST, PUT, DELETE ecc. Vediamo insieme un esempio di POST:

const postArticle = () => {
	fetch("https://esempio.test/api/post-article", {
    	method: "POST",
      headers: {	
        "Content-Type": "application/json"
      },
      	body: JSON.stringify({
        		title: "Titolo del post",
		        content: "<h1>Titlo del post</h1><p>Ciao!</p>"
    		})
    });
    .then(response => response.json())
	.then(data => console.log(data))
	.catch(error => console.error(error))
}

Fetch API offre il vantaggio di essere presente nativamente nei browser, quindi non necessita di nessuna libreria per essere utilizzata – come ad esempio axios. Inoltre viene utilizzata per:

recuperare gli oggetti in cache nei service worker;
recuperare grandi quantità di dati attraverso le streaming response;
controllare i redirect in base alla chiamata;

proprio per queste particolarità ha rimpiazzato l’uso di XHR, anche se non in tutto. Ad esempio web3.js, la libreria utilizzata per eseguire transazioni su blockchain, fa uso di XMLHttpRequest API per eseguire chiamate sui nodi.

Sentitevi liberi di scrivermi nei commenti per approfondire applicazioni d’uso della Fetch API.

Come usare Fetch API per eseguire chiamate HTTP

CONDIVIDI L’ARTICOLO

Lascia un commento Annulla risposta