Tutorial sull'API fetch JavaScript con esempi su JS Fetch Post e Header

Articolo originale: JavaScript Fetch API Tutorial with JS Fetch Post and Header Examples

Se stai scrivendo un'applicazione web, è probabile che dovrai lavorare con dati esterni provenienti dal tuo database o da API di terze parti.

Quando AJAX è apparso per la prima volta nel 1999, ci ha mostrato un buon modo per creare applicazioni web. AJAX è stata una pietra miliare nello sviluppo web ed è il concetto alla base di molte tecnologie moderne come React.

Prima di AJAX, dovevi ricaricare un'intera pagina web anche per aggiornamenti minori. Ma AJAX ci ha fornito un modo per fare il fetch dei contenuti dal server e aggiornare solo gli elementi necessari dell'interfaccia utente. Ciò ha aiutato gli sviluppatori a migliorare l'esperienza dell'utente e creare piattaforme Web più grandi e complesse.

Corso accelerato sulle API REST

Ora siamo nell'età delle API RESTful. In poche parole, un'API REST ti consente di eseguire l'invio e il recupero di dati da un datastore. Questo potrebbe essere il tuo database o il server di terze parti come l'API di Twitter.

Esistono diversi tipi di API REST. Diamo un'occhiata a quelli che utilizzerai nella maggior parte dei casi.

• GET — Ottieni dati dall'API. Ad esempio, ottieni un utente Twitter in base al suo nome utente.
• POST — Invia i dati all'API. Ad esempio, crea un nuovo record utente con nome, età e indirizzo e-mail.
• PUT —Aggiorna un record esistente con nuovi dati. Ad esempio, aggiorna l'indirizzo email di un utente.
• DELETE — Rimuovere un record. Ad esempio, eliminare un utente dal database.

Ci sono tre elementi in ogni API REST. La richiesta, la risposta e le intestazioni.

Richiesta— Questi sono i dati che invii all'API, come l'ID di un ordine per recuperare i dettagli dell'ordine.

Risposta— Tutti i dati che ricevi dal server dopo una richiesta riuscita/non riuscita.

Headers — Metadati aggiuntivi passati all'API per aiutare il server a capire con quale tipo di richiesta sta trattando, ad esempio "tipo di contenuto".

Il vero vantaggio dell'utilizzo di un'API REST è che puoi creare un unico livello API con cui lavorare con più applicazioni.

Se disponi di un database che desideri gestire utilizzando un'applicazione Web, mobile, e desktop, tutto ciò di cui hai bisogno è un unico livello API REST.

Ora che sai come funzionano le API REST, diamo un'occhiata a come possiamo utilizzarle.

XMLHttpRequest

Prima che JSON conquistasse il mondo, il formato principale di scambio di dati era XML. XMLHttpRequest() è una funzione JavaScript che rende possibile recuperare i dati dalle API che restituiscono dati tramite XML.

XMLHttpRequest ci ha da la possibilità di recuperare i dati XML dal server senza ricaricare l'intera pagina.

Questa funzione all'inizio accettava solo il formato XML, ma nel tempo è cresciuta. Ora supporta altri formati di dati come JSON e testo normale.

Scriviamo una semplice chiamata XMLHttpRequest all'API GitHub per recuperare il mio profilo.

// funzione per gestire il successo
function success() {
    var data = JSON.parse(this.responseText); //fai il parsing della stringa a JSON
    console.log(data);
}

// funzione per gestire errori
function error(err) {
    console.log('Request Failed', err); //dettagli dell'errore saranno nell'oggetto "err"
}

var xhr = new XMLHttpRequest(); //invoca una nuova instanza di XMLHttpRequest
xhr.onload = success; // invoca la funzione success se la richiesta ha successo
xhr.onerror = error;  // chiama la funzione error se la richiesta fallisce
xhr.open('GET', 'https://api.github.com/users/manishmshiva'); // apri una richiesta GET
xhr.send(); // manda la richiesta al server

Il codice sopra invierà una richiesta GET a https://api.github.com/users/manishmshiva per recuperare le mie informazioni su GitHub in formato JSON. Se la risposta ha esito positivo, stamperà il seguente JSON sulla console:

Se la richiesta fallirà, stamperà questo messaggio di errore sulla console:

L'API Fetch

L'API Fetch è una versione più semplice e facile da usare di XMLHttpRequest per recuperare risorse in modo asincrono. Fetch ti consente di lavorare con le API REST con opzioni aggiuntive come la memorizzazione nella cache dei dati, la lettura di un flusso di risultati e altro ancora.

La differenza principale è che Fetch funziona con le promesse, non con i callback. Gli sviluppatori JavaScript si sono allontanati dai callback dopo l'introduzione delle promesse.

Se sei abituato a scrivere request con callback, se la tua applicazione è complessa, potresti facilmente cadere in un  inferno di callback.

Con le promesse, è facile scrivere e gestire richieste asincrone. Se non conosci le promesse, qui puoi scoprire come funzionano.

Ecco come sarebbe la funzione che abbiamo scritto in precedenza se avessi usato fetch() invece di XMLHttpRequest:

// richiesta GET.
fetch('https://api.github.com/users/manishmshiva')
    // gestisci il successo
    .then(response => response.json())  // converti a json
    .then(json => console.log(json))    // stampa i dati sulla console
    .catch(err => console.log('Request Failed', err)); // gestisci gli errori

Il primo parametro della funzione Fetch dovrebbe essere sempre l'URL. Fetch può prendere un secondo parametro di tipo JSON con opzioni come metodo, intestazioni, corpo della richiesta e così via.

C'è una differenza importante tra l'oggetto risposta in XMLHttpRequest e Fetch.

XMLHttpRequest restituisce i dati come risposta mentre l'oggetto risposta da Fetch contiene informazioni sull'oggetto risposta stesso. Ciò include intestazioni, codice di stato, ecc. Chiamiamo la funzione "res.json()" per ottenere i dati di cui abbiamo bisogno dall'oggetto risposta.

Un'altra importante differenza è che l'API Fetch non genererà un errore se la richiesta restituisce un codice di stato 400 o 500. Verrà comunque contrassegnato come risposta riuscita e passato alla funzione "then".

Fetch genera un errore solo se la richiesta stessa viene interrotta. Per gestire le risposte 400 e 500, puoi scrivere un tuo codice usando "response.status". La proprietà "status" ti fornirà il codice di stato della risposta restituita.

Grande. Ora che hai compreso come funziona l'API Fetch, diamo un'occhiata a un altro paio di esempi come il passaggio di dati e l'utilizzo delle intestazioni.

Lavorare con le intestazioni

Puoi passare le intestazioni usando la proprietà "headers". Puoi anche utilizzare il costruttore dell'oggetto Headers per strutturare meglio il tuo codice. Ma il passaggio di un oggetto JSON alla proprietà "headers" dovrebbe essere sufficiente nella maggior parte dei casi.

fetch('https://api.github.com/users/manishmshiva', {
  method: "GET",
  headers: {"Content-type": "application/json;charset=UTF-8"}
})
.then(response => response.json()) 
.then(json => console.log(json)); 
.catch(err => console.log(err));

Passaggio di dati a una richiesta POST

Per una richiesta POST, puoi usare la proprietà "body" per passare una stringa JSON come input. Tieni presente che il corpo della richiesta dovrebbe essere una stringa JSON mentre le intestazioni dovrebbero essere un oggetto JSON.

// dati da mandare alla richiesta POST
let _data = {
  title: "foo",
  body: "bar", 
  userId:1
}

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: "POST",
  body: JSON.stringify(_data),
  headers: {"Content-type": "application/json; charset=UTF-8"}
})
.then(response => response.json()) 
.then(json => console.log(json));
.catch(err => console.log(err));

L'API Fetch è ancora in fase di sviluppo attivo. Possiamo aspettarci funzionalità migliori nel prossimo futuro.

Comunque, la maggior parte dei browser supporta l'uso di Fetch nelle tue applicazioni. Il grafico seguente dovrebbe aiutarti a capire quali browser lo supportano sul Web e sulle app mobili.

Spero che questo articolo ti abbia aiutato a capire come lavorare con l'API Fetch. Assicurati di usare Fetch per la tua prossima applicazione web.

Scrivo regolarmente di Machine Learning, Cyber ​​Security e DevOps. Puoi iscriverti qui alla mia newsletter settimanale in inglese.