‫Istruttore: Quindi hai
‫già imparato a usare un Async/Await,
‫ma in realtà c'è ancora un po'
‫di più da imparare su come funzionano effettivamente le funzioni Async.
‫Quindi facciamolo ora.
‫Per capire un po' meglio cosa succede qui, proviamo ad
‫aggiungere un po' di console. log dopo e
‫prima di chiamare le funzioni asincrone qui.
‫Ok, allora consolati. log
‫Quindi il primo passaggio
‫otterrà le foto del
‫cane, ok.
‫E poi il numero due.
‫Qui diciamo
‫solo che ho finito di scattare foto di cani.
‫Va bene. Quindi diamo un salvataggio.
‫E whoa, cosa è successo qui.
‫Abbiamo queste due console. log prima
‫di tutti i log provenienti dalla funzione Async.
‫Quindi abbiamo uno, due per questo
‫e questo e
‫solo dopo abbiamo i log
‫provenienti dalla foto del cane.
‫È quello che ti aspettavi?
‫Quindi, in caso contrario, analizziamo cosa è successo qui.
‫Bene, come ti ho detto prima, questa funzione Async
‫viene effettivamente eseguita in background.
‫Perché è così che le funzioni asincrone
‫dovrebbero semplicemente comportarsi.
‫Giusto, ha perfettamente senso?
‫Quindi non possiamo semplicemente fermare il codice qui.
‫Quindi, non appena premiamo questa
‫funzione, non possiamo semplicemente interrompere l'esecuzione del nostro thread principale qui.
‫Destra?
‫E questa è l'intera filosofia di non bloccare
‫il registro degli eventi.
‫Quindi abbiamo bisogno di ottenere alcune immagini di cani dall'API,
‫ma questa non è una scusa per interrompere l'esecuzione sul codice.
‫Quindi per bloccare il registro eventi.
‫Di conseguenza, quando il motore di script java è
‫terminato, questa riga di codice qui scaricherà semplicemente
‫la funzione get dog pic sullo sfondo e
‫passerà direttamente alla riga successiva.
‫Quindi questa seconda console. accedi qui.
‫Quindi ha senso che prima questa stringa qui venga registrata, quindi
‫inizierà a eseguire questa funzione,
‫quindi immediatamente registrerà questa riga di codice e nel
‫frattempo, leggiamo questo file in background e non
‫appena ciò è pronto, inizierà
‫a stampare questo registro, questo registro e
‫anche questo registro.
‫Quindi è esattamente quello che sta succedendo qui.
‫Uno due, e poi restanti tre.
‫Ha senso? Va bene.
‫Quindi facciamo un ulteriore passo
‫avanti e restituiamo effettivamente qualcosa dalla nostra funzione Async.
‫Quindi lo cambio qui in tre, in modo
‫che da questa funzione possiamo restituire una
‫stringa che dice due, beh diciamo pronto e poi aggiungiamo di nuovo
‫qui un'emoji per farlo risaltare
‫un po' di più nella nostra console.
‫Quindi pronto qui.
‫E poi salviamolo.
‫Semplicemente una variabile, non importa cosa sia.
‫E poi accedi x alla console.
‫Quindi vediamo cosa succede.
‫E poi ora ecco che riceviamo questa
‫strana promessa in sospeso invece della stringa qui che forse ci aspettavamo.
‫Allora perché x è qui e non questa
‫stringa, ma questa promessa qui?
‫Bene, ricordi come ho detto all'inizio dell'ultimo
‫video che una funzione
‫Async effettivamente restituisce automaticamente una promessa?
‫Bene, quindi questa è la prova per questo.
‫Quindi, invece di accedere alla console a questo punto, ci dice
‫solo che x è una promessa che a questo punto
‫è ancora in esecuzione e quindi è
‫ancora in sospeso.
‫Ecco perché dice in sospeso qui.
‫Quindi lo script java ovviamente non può sapere che x sarà
‫questa stringa pronta qui ad un certo punto.
‫E così passa semplicemente alla console successiva. log proprio
‫come avevamo discusso prima.
‫E nel momento in cui JavaScript sa effettivamente
‫che questa x qui dovrebbe essere il ceppo che abbiamo restituito
‫bene a quel punto, questo codice qui
‫ha terminato da tempo l'esecuzione.
‫Ma cosa dovremmo fare se volessimo
‫effettivamente ottenere quel valore di ritorno qui?
‫E se volessimo davvero restituire questa stringa e
‫registrarla tramite la console?
‫Bene, dovremmo considerare questa funzione asincrona come
‫una promessa.
‫E quindi useremmo il metodo
‫DEN su di esso o ancora, usiamo Async/Await.
‫Lascia che ti mostri come farlo.
‫Quindi, invece di provare a salvare il valore restituito
‫in una variabile, possiamo usare il metodo DEN su di essa.
‫E quindi ecco dove possiamo chiamarlo x.
‫Quindi consolati. log x quindi proprio come quello che
‫avevamo qui e poi faremmo anche questo all'interno
‫della maniglia DEN, ok?
‫Quindi esaminiamo ciò che abbiamo fatto qui.
‫Quindi ottenere la foto del cane restituisce una promessa, lo ricordi?
‫E così ogni volta che abbiamo una promessa, usiamo il metodo DEN
‫per avere accesso al suo valore futuro.
‫Quindi il valore che alla fine tornerà.
‫In tal caso, queste saranno le due stringhe pronte.
‫Va bene?
‫Quindi, se vuoi ottenere
‫x, dobbiamo usare il metodo DEN come abbiamo appena fatto qui.
‫E solo dopo possiamo registrare la terza
‫stringa proprio qui.
‫Quindi, se gli diamo un
‫salvataggio ora come questo, dovrebbe funzionare come previsto.
‫E sì, lo fa.
‫Quindi abbiamo il nostro primo registro, quindi tutti
‫i registri provenienti dalla nostra funzione Async, quindi il
‫pronto proveniente dalla riga 42 qui.
‫E infine, il numero 3. Perfetto.
‫E spero che abbia perfettamente senso per te.
‫Ora cosa succede se effettivamente c'è stato un errore?
‫Beh, è un po' più difficile da gestire.
‫Quindi cerchiamo di nuovo di causare un errore come abbiamo fatto prima.
‫Ma vedi che in realtà entriamo ancora nel
‫metodo DEN qui.
‫Quindi questo blocco qui, ok.
‫Quindi, anche se c'è stato un errore qui in questa promessa, sostanzialmente
‫si risolve comunque come una promessa di successo.
‫Quindi restituisce ancora questo valore qui.
‫E anche se aggiungiamo il nostro gestore di cattura quaggiù,
‫questo non cambierà il fatto.
‫Ok, allora usiamo catch qui
‫e poi console. log e registra l'errore qui
‫in modo da poter vedere che ancora non ha registrato alcun errore.
‫E questo è di nuovo perché questa promessa
‫qui proveniente da questa funzione asincrona sarà
‫ancora contrassegnata come riuscita.
‫Ma se vuoi davvero contrassegnarlo come
‫rifiutato, dovremo fare qualcosa chiamato lancio di un errore.
‫Quindi facciamolo qui in questo blocco di cattura.
‫Quindi, se si è verificato un errore, non solo vogliamo
‫registrarlo sulla console, ma vogliamo anche eliminarlo.
‫Quindi usiamo una funzione JavaScript incorporata chiamata throw.
‫E con questo possiamo lanciare un errore.
‫Quindi questo ora segnerà l'intera funzione di questa promessa
‫come respinta.
‫Va bene.
‫In realtà non registriamo solo questo errore,
‫facciamo semplicemente un errore per renderlo un po' più visibile,
‫e forse qualcosa come un'esplosione.
‫Sì, qualcosa del genere.
‫Ok, quindi facciamo un salvataggio e vediamo cosa succede.
‫E bam, quindi ora abbiamo il nostro errore qui in realtà.
‫Quindi dice che non sono riuscito a
‫trovare quel file, quindi questo registro proviene da
‫questo registro di cattura qui ma allo stesso tempo genererà un errore.
‫E se genera un errore, questo
‫contrassegnerà l'intera promessa come rifiutata.
‫Ed è per questo che inseriamo qui il registro delle catture.
‫Che poi, ovviamente, a sua volta attiverà
‫questa console. registro di questo errore.
‫Va bene?
‫E questo ovviamente è un livello completamente nuovo di complessità.
‫Va bene.
‫Ma è ancora molto importante capire come funziona,
‫perché accade continuamente nella vita reale.
‫Quindi abbiamo bisogno di restituire sempre valori
‫dalle funzioni Async e quindi è
‫importante sapere come gestire effettivamente questi valori restituiti.
‫In questo caso, usa DEN e cattura.
‫Ora, il problema è che mescola
‫le promesse con Async/Await.
‫Quindi abbiamo Async/Await quassù, poi
‫all'improvviso torniamo a usare DEN
‫e raggiungiamo qui.
‫Quindi lascia che ti mostri effettivamente un altro schema per farlo.
‫Ok, quindi veniamo in questa parte qui, non
‫in questo modo, più in questo modo.
‫Quindi usiamo Async/Await per implementare questa logica.
‫Ora non vogliamo creare una funzione di nome completamente nuova
‫per questo, quindi useremo un modello ben noto che
‫spero tu sappia, che è
‫un IIFE, quindi un'espressione di funzione immediatamente invocata.
‫Ok, quindi tra parentesi definiamo la nostra funzione.
‫Così, e poi lo chiamiamo subito.
‫Ricordati che?
‫Quindi, in questo caso, poiché vogliamo usare Async/Await,
‫diciamo anche che è una funzione Async.
‫Ok, e quindi questo sembra un po' strano
‫qui, ma se hai preso ad esempio il mio corso
‫JavaScript, questo ti sembrerà familiare in realtà.
‫Ok, di nuovo, dichiari una funzione
‫tra parentesi e poi la chiami subito funzione.
‫E così in questo modo, non
‫devi dichiarare di nuovo una funzione di nome intero che
‫chiamerai in seguito.
‫Va bene.
‫Ora, poiché stiamo usando Async/Await,
‫stiamo usando di nuovo lo schema try it catch, come prima.
‫Quindi cattura, accedi all'errore qui e in
‫realtà non possiamo ometterlo qui.
‫Quindi, anche se non vogliamo
‫usare questo errore, dobbiamo comunque scriverlo qui.
‫Va bene.
‫Nelle future versioni di JavaScript
‫questo non sarà più disponibile, ma per ora dobbiamo farlo in questo modo.
‫Quindi questo è dove sarà questo errore.
‫E quassù, avremo tutte queste console. log.
‫Questo
‫e questo.
‫E ora spero che tu sappia come ottenere
‫effettivamente il valore dalla funzione Async.
‫Quindi sai come farlo.
‫In realtà metterò in pausa il video e ti permetterò
‫di capire come farlo da solo, ok?
‫Quindi accetta questa piccola sfida e tornerò in
‫un secondo.
‫Quindi sei riuscito a ottenere questa stringa qui, quindi
‫questi due pronti nella variabile x proprio
‫come avevamo prima?
‫Quindi proprio come questo qui?
‫Quindi è proprio come facevamo prima.
‫Dichiari una variabile e poi attendi la promessa.
‫E la promessa, in questo caso, è ottenere una foto del cane.
‫Va bene?
‫Quindi questa funzione qui è una funzione
‫asincrona e quindi restituisce una promessa.
‫E il valore del risultato di
‫quella promessa è questo valore
‫qui, che viene restituito, e quindi aspettando quel
‫valore, il risultato sarà questa stringa.
‫Quindi lo memorizziamo in x e quindi possiamo
‫ovviamente registrarlo sulla console.
‫Quindi consolati. registro x.
‫Quindi, in caso di errore, lo catturerà e lo
‫registrerà anche qui sulla console.
‫Se gli diamo un
‫salvataggio ora, bam otteniamo ancora l'errore perché
‫lo avevamo qui, quindi quella parte funziona ancora.
‫Ripararlo, salvarlo e ci siamo.
‫Quindi ora funziona come previsto.
‫Ma, ancora una volta, con Async/Await è molto più pulito,
‫ha un aspetto molto migliore ed è anche più facile da capire.
‫E quindi non stiamo mixando Async/Await in un posto qui e
‫poi usando DEN e catch down qui come abbiamo fatto
‫prima con questo pezzo di codice.
‫Va bene?
‫Quindi nella vita reale, questo genere di cose accadono tutto il tempo.
‫Quindi abbiamo una funzione Async e l'abbiamo chiamata
‫da un'altra funzione Async, e forse abbiamo anche chiamato
‫un'altra funzione Async da quella
‫prima funzione Async, e quindi abbiamo un
‫sacco di queste funzioni Async che interagiscono tra loro.
‫E quindi è molto importante che tu sappia
‫come funziona tutto questo.
‫E ancora per ricapitolare, la cosa
‫più importante da ricordare è che una funzione Async
‫restituisce automaticamente una promessa e che il valore che restituiamo
‫da una funzione Async sarà il valore del risultato di
‫quella promessa.
‫E così da lì, possiamo semplicemente gestirlo
‫come un'altra promessa.
‫Ed è esattamente quello che abbiamo fatto qui in attesa di
‫quella prima promessa che abbiamo creato.
‫Va bene?
‫Quindi, per favore, cerca di avvolgere la tua testa intorno a
‫questo e assicurati di averlo veramente capito.
‫Perché per il resto del corso darò
‫per scontato che tu sappia come lavorare con queste cose.
‫Ed è esattamente questo il motivo per
‫cui ho creato questa sezione, per toglierla di mezzo prima di
‫iniziare davvero a lavorare senza JS ed esprimere, e tutte queste cose buone.
‫Va bene?
‫Quindi abbiamo quasi finito con questa sezione, c'è solo una
‫piccola cosa che voglio mostrarvi
‫nel prossimo video.