Javascript Fetch Api

__del__ | __delete__ | exp | JavaScript | log | sin | system

Michael Zippo 04.11.2021

Gli sviluppatori devono spesso recuperare i dati dalla propria API o da un’API di terze parti. Questo articolo parla dell’utilizzo dell’API Fetch del browser per OTTENERE alcuni dati da un endpoint.

L’API Fetch è un’interfaccia che ci consente di effettuare richieste HTTP a un server da un browser Web come Chrome o Firefox . Una richiesta GET colpisce un endpoint su un server quindi restituisce una risposta con i dati da quell’endpoint in modo che tu possa leggerli.

Tipi di richieste

La richiesta HTTP GET è solo un tipo di richiesta che puoi fare a un server. Altri tipi di richieste sono POST, PUT e DELETE. Queste richieste fanno un’applicazione CRUD. è qui che possiamo creare (POST), leggere (GET), aggiornare (PUT) e distruggere (DELETE) i dati nel nostro database.

Inoltre, possiamo raggiungere endpoint di terze parti API. A seconda dell’API, ti sarà consentito eseguire solo determinate richieste, principalmente per mantenere immutabili i loro dati, quindi non sarai in grado di eseguire quelle richieste che manipolano i dati, sarai solo in grado di leggerli.

Come funziona l’API Fetch?

L’API Fetch utilizza un sistema di comunicazione basato su Promise. Come promemoria, le promesse sono funzioni asincrone che incapsulano la logica nel proprio blocco di codice e restituiscono una risposta che determina se la promessa è stata risolta o rifiutata.

Come utenti dell’API Fetch, non esponiamo Non è necessario scrivere effettivamente la logica della promessa. Dobbiamo solo usarlo per inviare una richiesta e l’API Fetch restituisce una promessa nascosta. Ecco la sintassi di base in modo da poter ottenere la risposta:

promise.then(response).then(json).catch(error);

La promessa è il richiesta asincrona effettiva. Il metodo fetch() è disponibile nell’ambito globale e viene passato all’endpoint a cui vogliamo effettuare la richiesta HTTP.

Dopo la richiesta, possiamo utilizzare la sintassi promise con then e catch o utilizzare la funzione async/await per ottenere la risposta del server.

Sintassi della promessa

Qui prendiamo la promessa e poi aspettiamo una risposta. Quando riceviamo una risposta, se il codice di stato è diverso da 200, registriamo un codice di errore sulla nostra console e terminiamo la funzione.

Altrimenti, per rendere leggibile la risposta in modo che il nostro sito web frontend può usarlo, lo cambiamo in oggetto JavaScript Object Notation (JSON) con il metodo json(). Vogliamo che questo venga valutato prima di andare avanti, quindi concateniamo una promessa alla promessa precedente.

Una volta valutata, possiamo registrare ciò che è stato passato per vederlo sulla nostra console. Se stai seguendo, dovresti ottenere qualcosa del genere:

Se otteniamo queste informazioni sul frontend, possiamo usarlo per popolare carte o un tavolo o comunque vorremmo visualizzarlo.

Async/Await

Possiamo anche usare la funzione async/await per registrare lo stesso risultato.

La parola chiave async ci dice che una parte di quella funzione sarà asincrona. Quando arriviamo alla parola chiave wait, l’esecuzione dello script si interrompe finché non viene valutata quella riga di codice.
< /p>

Abbiamo due istruzioni await in questa funzione, paragonabili alle due istruzioni then() che avevamo nella logica della promessa. Un’istruzione attende il recupero accada all’URL in cui siamo passati e l’altro è stato è finché le informazioni recuperate non sono state analizzate in JSON. Utilizziamo try/catch per rilevare eventuali errori che potrebbero verificarsi se dalle risposte ritorna qualcosa di insolito.

Note finali

Perché l’API Fetch funzioni nell’ambiente del nodo (cioè se stai usando un IDE come Visual Studio Code), dovrai yarn add o npm install node-fetch, poiché fetch funziona solo in l’ambiente del browser.