Le funzioni asincrone in JavaScript

In questo video parleremo delle funzione asincrone di JavaScript. A differenza di quanto dico durante il video, le funzioni asincrone non sono state rilasciate con ECMAScript7 ma con ECMAScript8 (ovvero nel 2017).
Essendo le funzioni asincrone molto recenti, bisogna stare attenti nell'usarle perchè è facile trovare utenti con browser non aggiornati e che quindi non le supportano (in questo caso la nostra pagina web non funzionerà come dovuto).
Abbiamo già parlato nel "video sez4/1" di tutti i tipi di funzione che esistono in JavaScript e in questo video vado a presentarvi l'ultimo arrivato. Queste funzioni però sono diverse dalle altre, perchè come suggerisce il loro nome, sono state ideate per lavorare con codice asincrono e si distinguono dalle normale funzioni perchè il loro nome è preceduto dalla keyword "async".
Abbiamo introdotto il codice asincrono nel "video sez8/2", quando abbiamo parlato delle Promise e, in questo video, vedremo proprio come usare queste nuove funzioni insieme ad una Promise e come sia possibile sostituire il metodo "then()" con la nuova keyword "await".
L'introduzione delle funzioni asincrono permette di maneggiare il codice asincrono in maniera più semplice ed intuitiva che non con il solo uso di Promise ed inoltre vanno a sostituire (tranne in sofisticate operazioni) l'uso dei "generatori" che vedremo nel "video sez8/7".
In questo video riscriveremo l'esercizio del video precedente e vedremo come maneggiare multiple chiamate Ajax, verso un vero server online, sia che esse siano: in serie, in parallelo o in modalità race.

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ò
delle funzioni asincrone introdotte
dall'acma script 7 allora devo fare due
premesse la prima premessa è per capire
come funziona nelle funzioni asincrone
bisogna avere una idea chiara di come
funzionano le Promesi la seconda
premessa e' siccome l'ecma script 7 è
abbastanza recente come pubblicazione
solo le ultime versioni dei browser
supportano le funzioni asincrone quindi
se andate a creare un sito che usa le
funzioni sincrone e lo pubblicate dove
tutti gli utenti possono vederlo
se un utente a un browser un po' datato
non gli funzionerà quindi state attenti
a quello che dovete fare allora come
vedete io qui ho il mio stesso file
del video precedente dove ho la mia
funzione carica file che ritorna una
Promesi
qui ho le mie tre chiamate per le mie
tre coin bitcoin ethereum ripple
qui ho le mie tre chiamate in parallelo
con Promise.all()
e qui ho le mie tre chiamate usando
Promise.race() dove vince solo la più
veloce
adesso vado a riconvertire questa questa
funzione usando le funzioni asincrone
allora prima di tutto si usa la keyword
async davanti al nome della
keyword function quindi convertendo
questa funzione in una funzione
asincrona poi vado a creare una
variabile const e la chiamo e la
chiamo questa è la variabile per i
bitcoin e vado a salvare il valore è
ritornato dalla funzione carica file per
bitcoin dentro a questa variabile
però abbiamo detto che una Promesi è
sempre asincrona quindi io devo andare a
dire a javascript aspetta il risultato
di questa Promesi di questa funzione
che ritorna la Promesi qui per dire
a javascript aspetta il risultato deve
usare la keyword await
eccola quindi io sto andando ad invocare
questa funzione che verrà elaborato in
maniera asincrona e javascript
con questa keyword qui aspetta
finché
questa funzione ritorno a qualcosa
ritorna un valore che può essere il
valore che aspetto o un errore poi vado
a salvare il suo risultato dentro alla
mia variabile const alla mia variabile
btc non mi serve più il metodo "then"
quindi io posso andare a usare il btc
qui e vado a fare il parsing
dell'oggetto json vado a salvare il suo
valore dentro alla variabile dati e vado
a fare il suo output qui adesso devo
andare a fare la chiamata per ethereum
ancora allora io uso const eth e
ancora uso la keyword await
finché questa funzione mi ritorna un
valore non mi serve più il "then" adesso
sempre in dati vado a fare il parsing
dell'oggetto ritornato
ecco qui è ancora qui ciò la chiamata
per ripple quindi const ripple che la
sigla e' xrp e ancora await e aspetto per
ripple ancora qui dati e voilà non mi
serve più il metodo "catch" e quindi sto
facendo lo stesso lavoro di prima però
come vedete la sintassi è molto più
compatta e anche molto più intuitiva
io qui invoco le mie funzioni aspetto
per un risultato e poi il risultato lo
passo
lo faccio il parsing e lo visualizzo se
qualcosa va storto c'è un errore
qualcosa io posso usare tutto sto blocco
di codice dentro un try catch e come
abbiamo già visto fare quindi io faccio
uso un try per vedere per fare le
chiamate se qualcosa va storto mi viene
catturato dal mio catch eccolo qui e
vado a fare l'output dell'errore in
caso di qualcosa che vada storto
adesso io sa lo vediamo cosa succede
come vedete ho fatto la mia prima
chiamata dovrei avere bitcoin esatto
però c'è qualcosa che andato storto e
stato catturato dal mio
catch perché qui quando ho
creato le variabili non ho passato in nome
delle variabili in tutti e due i casi
adesso risalvo la pagina e come vedete
ho ricevuto le mie tre risposte bitcoin
ethereum e ripple
come vedete la funzione molto più la
sintassi molto più compatta e intuitiva
adesso vi faccio vedere come usare una
funzione asincrona per fare una chiamata
in parallelo
eccola qui allora come sempre keyword
async e qui crea una variabile const
cosa ho fatto
allora const scrivo tutte e ancora a
await e poi c'ho le mie tre chiamate e
punto e virgola
come sempre allora io faccio una
chiamata per tutte e tre le Promesi e
aspetto finché non ho tutte e tre le
risposte non mi serve più il "then" qui
quindi io adesso faccio così e qui sarà
tutte non mi serve più il catch però poi
come prima posso mettere tutto dentro
ad un try/catch e quindi è ancora a catch
che cattura l'errore e faccio il console
log di un eventuale errore
andiamo a vedere eccoli qua ancora ciò
tutti e tre i miei i miei dati uno su
bitcoin uno per ethereum e uno per ripple fatto
con la chiamata in parallelo adesso
a vedere come si può usare la funzione
asincrona per il metodo race allora
questo era la funzione col metodo race
ancora una volta async ancora una volta
const e la chiamo vincitore
await mette un punto e virgola e qui ci metto il vincitore
se mi serve il try catch e come sempre
sempre meglio usarlo che non si sa mai
come va a finire
catch errore console.log errore
andiamo a vedere
ecco perché c'è un errore e lo ho catturato
con il mio catch ok perfetto
eccolo qua ha vinto ripple se io ricarico la
pagina ha vinto ethereum se io ricarico la
pagina ha vinto ancora ripple con questo è
tutto ci sentiamo la prossima ciao
File del video: