Fetch API

In questo video parleremo della Fetch API.
Questa API è ormai implementata in tutti i browser e semplifica di molto il lavoro del programmatore nel momento in cui deve recuperare informazioni dalla rete. La Fetch API ritorna sempre una Promise e quindi si può maneggiare la sua risposta con il metodo then() o una funzione asincrona.
In questo video vedremo come utilizzare la Fetch API per richiedere delle informazioni ad un server online. Partiremo dal codice che abbiamo scritto nel video sez8/4 per avere le quotazione di alcune crypto, e poi lo modificheremo per ottenere lo stesso risultato in maniera molto più compatta e semplice. Infatti, la Fetch API ci risparmia dal dover scrivere tutto il codice che utilizza la chiamata Ajax.

Note al video: 

IMPORTANTE: coinmarketcap.com ha cambiato regole e ora le sue API sono disponibili solo per chi crea un account. Ho trovato un altro servizio con API pubbliche restcountries.eu, tutto il codice descritto nel video rimane lo stesso dovete solo cambiare l'Url a cui richiedere i dati. Il nuovo Url e': https://restcountries.eu/rest/v2/capital/london, potete cambiare il nome della citta' a vostro piacimento.

Trascrizione: (click per espandere)
salve a tutti in questo video parlerò
della fetch API
questa è la sua pagina di documentazione
ve lo faccio vedere un po' più grande è
abbastanza complessa perché è molto
potente però io vi farò vedere un metodo
molto semplice per usarla comunque poi
trovate tutte le informazioni che vi
servono mi metto anche il link in
descrizione cos'è la fetch API la
fetch API fornisce un'interfaccia per
ottenere risorse attraverso la rete
abbiamo già visto noi come ottenere
risorse attraverso la rete usando una
chiamata ajax e poi abbiamo visto anche
come usare una promesi che avvolge la
nostra chiamata ajax per ottenere
sempre informazioni dalla rete e poi
abbiamo visto anche come usare le
funzioni asincrone per maneggiare le
promesi che a loro volta maneggiano
chiamate ajax se non vi ricordate cosa
che sto dicendo o non sapete cosa sto
dicendo vi mette il link in descrizione
dove trovare tutti i video che parla che
parlano di queste cose perché dovete
avere le idee chiare su quello prima di
seguire la fetch API allora adesso
vi faccio vedere come ottenere lo stesso
risultato che abbiamo ottenuto nella
sezione 8.4 usando queste due funzioni
queste le accoppiate dal mio video 8.4 e
delle funzioni asincrone quindi le la
stesso risultato che è ottenere il
valore del bitcoin dell' ethereum e di
ripple usando le nostre funzioni asincrone
le nostre promesi la nostra il
nostro XMLHttpRequest oggetto
però con la fetch API allora vi
faccio vedere subito subito allora io
uso sempre lo stesso nome della funzione
ecco qui e qui invece di ritornare una
nuova promesi che al suo interno ha
l'oggetto e XMLHttpRequest ritorno la
fetch API, la fetch API ritorna sempre una promesi
quindi io dentro alla mia fetch come
argomento
ci metto url che voglio venga usato
per la chiamata
ecco qui e adesso questo lo commento
ecco qua ho convertito tutto sto blocco
di codice qui in una sola riga perché
uso la fetch API
eccola qua anzi qui devo usare backtick altrimenti non mi funziona niente
eccolo qua adesso vado a modificare
leggermente il codice per maneggiare il
risultato della fetch API perché questo mi
viene ritornato allora io commento
questo e scrivo sempre una funzione
asincrona e la chiamo convertiJson
com'era quello lì non mi serve più il
try catch e poi vi dico perché allora io
metto anzi posso copiare direttamente da
qua ok e adesso vi faccio vedere cosa mi
ritorna la fetch API e quindi btc andiamo
a vedere eccolo qua questo è risposto
della feccia e come vedete mi ritorna un
oggetto che ha delle proprietà tra cui
l'url che ho chiamato quando ho
chiamato la mia funzione carica file
passando il bitcoin e poi ho lo status
200 ok true
posso andare anche a vedere un po' più in
profondità eccolo qui però ancora non ho
i miei valori cosa devo fare per vedere
i miei valori
metto posso mettere let dati ancora await e poi uso btc json che è
un metodo built in
dentro alla fetch API e poi posso
andare a vedere visualizzare il valore
di dati vogliamo vedere
eccolo qui e questo è il mio valore di
bitcoin quindi io qui
invoco la mia funzione che mi
ritorna la mia
il valore ritornato dalla fetch API sotto forma di promesi e usando il
metodo built-in json
vado ad estrarre questo valore eccolo
qui quindi posso fare lo stesso per
ethereum
ecco qua e poi ci metti sempre si mette
sempre
ecco metto eth
e poi faccia visualizzazione di dati e
poi faccio lo stesso per ripple
andiamo a vedere eccolo qua ciò i miei
tre valori uno per bitcoin uno per
ethereum e uno per ripple
semplicissimo molto meno codice di primo
usando la fetch API è semplicissima o
come vi dicevo la fetch API e può essere
usata per anche per cose un po' più
complesse dateci un'occhiata alla
documentazione però il risultato non
cambia e ho scritto molto meno codice
come vi dicevo non serve mettere dentro
al try catch è questo qua perché la
fetch API non mi ritorna mai un
errore perché se io per esempio adesso
vado a scrivere un url che non esiste come vedete invece di ritornamii
status 200 ok true, mi ritorna status 404
ok false, quindi io posso andare a lavorare
a vedere se le proprietà del mio oggetto
la proprietà status la proprietà ok sono
negative posso maneggiare l'errore in
quel caso quindi
posso appunto rifaccia rivedere la
differenza quando tutto va bene è status
200 ok true, con tutto questo io
direi che ho detto tutto ci sentiamo la
prossima
File del video: