‫Istruttore: Parliamo ora
‫di una straordinaria funzione JavaScript asincrona chiamata async/await.
‫Quindi le promesse hanno già reso il nostro codice molto
‫migliore, ma possiamo ancora fare di meglio.
‫Quindi, invece di consumare promesse, con il metodo then, che
‫ci fa ancora usare tutte queste funzioni di callback,
‫possiamo usare qualcosa chiamato async/await.
‫Questa è una nuova funzionalità introdotta in JavaScript in ES8, che
‫renderà la nostra vita molto più semplice.
‫Quindi, di solito, quando
‫scriviamo codice, consumeremo continuamente le promesse, ma di
‫solito non le produrremo così tanto.
‫E così, async/await lo rende molto più facile da fare.
‫Ora per usare
‫async/await, dobbiamo creare una cosiddetta funzione asincrona.
‫Quindi commentiamo effettivamente questa parte qui, in modo da
‫non perderla del tutto, nel caso in cui vogliate
‫tenerla qui come riferimento o qualcosa del genere.
‫Quindi getDogPic è la funzione che scriveremo.
‫E ora dobbiamo contrassegnare questa
‫funzione come funzione asincrona.
‫Quindi utilizziamo asincrono
‫qui e quindi creiamo la funzione come facciamo normalmente.
‫Quindi questa parola chiave asincrona qui significa
‫semplicemente che questa è una funzione speciale asincrona.
‫Quindi, in pratica, uno che continua a
‫funzionare in background durante l'esecuzione del codice in esso
‫contenuto, mentre il resto del codice continua a essere eseguito nell'Event Loop.
‫Quindi queste funzioni asincrone funzioneranno in
‫modo asincrono senza mai bloccare l'Event Loop, ok?
‫Questa funzione asincrona restituirà automaticamente
‫anche una Promessa.
‫Ma ne parleremo più avanti in questo video.
‫Per ora ciò che è veramente
‫importante sapere è che all'interno di una funzione asincrona possiamo sempre avere
‫una o più espressioni di attesa ed
‫è così che funzionano.
‫Quindi usiamo wait e poi Promise qui.
‫Allora cominciamo con questo, ok?
‫E poi possiamo salvare il risultato di ciò in una variabile.
‫In questo caso i dati.
‫Ok, quindi questo qui sarà come avere
‫questo pezzo di codice.
‫Quindi vediamo cosa succede qui.
‫Quindi questo wait qui fondamentalmente interromperà l'esecuzione
‫del codice a questo punto fino a quando questa Promessa non sarà risolta.
‫Ora, se la Promessa è
‫soddisfatta, il che significa che ha
‫avuto successo, il valore
‫dell'espressione di attesa è il valore risolto
‫della Promessa, che viene infine assegnato alla variabile di dati, ok?
‫Quindi, invece di avere la Promessa e
‫poi il metodo then su
‫di essa, che quindi ottiene i dati come argomento.
‫Con async/await è molto più semplice.
‫Tutto ciò che facciamo è sostanzialmente interrompere l'esecuzione del codice a questa
‫Promessa qui, attendere fino a quando non
‫ritorna con il suo valore e quindi memorizzare quel valore in una variabile.
‫E in questo modo il codice
‫è ancora più facile da capire rispetto a prima.
‫E questo è il
‫punto centrale di async/await: è far sembrare il nostro
‫codice più simile al codice sincrono mentre
‫in realtà è ancora asincrono dietro le quinte, ok?
‫Quindi continuiamo con questo e copiamo i pezzi da
‫questo esempio prima in quello nuovo, ok?
‫Quindi, prima, avevamo la nostra Promise, poi avevamo il nostro gestore di allora
‫e poi registravamo i dati sulla console.
‫Quindi questo è esattamente
‫quello che abbiamo, semplicemente in un modo diverso qui.
‫Quindi otteniamo i nostri dati memorizzati nella
‫variabile e quindi li registriamo qui.
‫Successivamente, otteniamo l'immagine del cane dall'API.
‫Quindi abbiamo la variabile res, quindi sarà questa.
‫Quindi, di nuovo, il risultato dell'handler
‫di allora e attendiamo questa Promessa qui per tornare con i dati.
‫Spero che questo stia iniziando ad avere un senso ora.
‫Quindi, dopo, lo registriamo sulla console, quindi il risultato
‫di quella chiamata API.
‫E infine, usiamo la nostra ultima
‫Promessa per scrivere quella stringa in un file.
‫Quindi questa è questa Promessa
‫qui, e questa non risolve alcun valore significativo.
‫E quindi non abbiamo nemmeno bisogno di memorizzare nulla in una variabile.
‫Tutto ciò che facciamo è fermare il
‫codice qui fino al termine del processo di scrittura.
‫E poi accedi alla console
‫questa stringa.
‫Quindi, se confronti questo codice con quello che avevamo
‫prima, sembra molto più pulito
‫e molto più facile da capire, non è vero?
‫Ora, per fare in modo che funzioni,
‫tutto ciò che dobbiamo fare è chiamare effettivamente questa funzione qui.
‫Salvalo e in effetti funziona ancora.
‫Quindi otteniamo ancora il nostro risultato.
‫Tutto funziona ancora allo stesso modo.
‫Quindi è fantastico, vero?
‫Solo un'ultima cosa che dobbiamo fare qui è
‫la nostra gestione degli errori.
‫Perché in questo momento non stiamo gestendo errori da nessuna parte, giusto?
‫Quindi quaggiù abbiamo usato il metodo catch, ma
‫in questo momento non
‫possiamo davvero collegarlo da nessuna parte, vero?
‫Quindi, invece, quello
‫che facciamo qui è usare qualcosa chiamato try-catch.
‫E in realtà questo non ha nulla a che fare
‫con async/await, è una funzione JavaScript standard.
‫Quindi lascia che ti mostri come funziona.
‫Quindi fondamentalmente avvolgiamo tutto il nostro codice in un blocco try.
‫Quindi fondamentalmente il
‫codice proverà a eseguire qualunque cosa ci sia qui.
‫E poi abbiamo anche bisogno di un blocco
‫catch, che avrà accesso a un errore se ce n'è uno.
‫Quindi, se si verifica un errore in questo blocco qui,
‫uscirà immediatamente da questo blocco,
‫questo blocco try qui, quindi questo.
‫E vai immediatamente nel blocco catch e ci
‫darà accesso all'errore che si è
‫verificato nel blocco try.
‫Quindi ora, tutto ciò che dobbiamo fare è prendere questo
‫pezzo di codice per questo registro
‫della console, metterlo qui, salvarlo e ora funziona.
‫Giusto per causare
‫un errore ora, cambiamo di nuovo questo qui.
‫E infatti, non sono riuscito a trovare quel file.
‫Quindi questa Promessa qui è stata rifiutata, giusto?
‫Quindi questa Promessa è stata rifiutata e quindi c'è stato
‫un errore e subito è entrato nel blocco catch e quindi
‫ha registrato questo errore nella console.
‫Rimettilo a posto.
‫E ora, in effetti, funziona di nuovo.
‫Ok, è così che funziona async/await.
‫Quindi ricorda che possiamo usare wait solo se
‫è all'interno di una funzione asincrona.
‫Ecco perché viene sempre chiamato insieme, quindi
‫aspetta sempre la barra asincrona.
‫Perché queste due caratteristiche, si appartengono strettamente insieme.
‫Quindi, solo per ricapitolare
‫rapidamente, async/await ci consente invece di avere
‫tutti questi gestori con queste
‫funzioni di callback al loro interno.
‫Ci consente di rendere il nostro codice più sincrono.
‫Quindi tutto ciò che facciamo è usare la parola chiave
‫wait davanti alla nostra Promessa.
‫E poi aspetterà che quella Promessa
‫torni con il suo risultato.
‫Ricorda solo che questo è
‫ciò che chiamiamo zucchero sintattico per le promesse.
‫Quindi fa semplicemente sembrare le promesse più belle, ma dietro le
‫quinte tutto funziona ancora allo stesso modo con la
‫logica della Promessa che ti ho spiegato prima.
‫Quindi, ancora una volta, questo è
‫solo per semplificarci la vita durante la codifica e
‫rendere il nostro codice un po' più simile al codice sincrono.
‫Quindi è così che implementiamo async/await.
‫Nel prossimo video
‫impareremo qualcosa in più su come funzionano effettivamente le funzioni asincrone.