1 00:00:01,340 --> 00:00:03,150 ‫Istruttore: Parliamo ora 2 00:00:03,150 --> 00:00:06,643 ‫di una straordinaria funzione JavaScript asincrona chiamata async/await. 3 00:00:08,040 --> 00:00:11,023 ‫Quindi le promesse hanno già reso il nostro codice molto 4 00:00:11,023 --> 00:00:13,340 ‫migliore, ma possiamo ancora fare di meglio. 5 00:00:13,340 --> 00:00:16,400 ‫Quindi, invece di consumare promesse, con il metodo then, che 6 00:00:16,400 --> 00:00:19,380 ‫ci fa ancora usare tutte queste funzioni di callback, 7 00:00:19,380 --> 00:00:21,440 ‫possiamo usare qualcosa chiamato async/await. 8 00:00:21,440 --> 00:00:25,040 ‫Questa è una nuova funzionalità introdotta in JavaScript in ES8, che 9 00:00:25,040 --> 00:00:27,710 ‫renderà la nostra vita molto più semplice. 10 00:00:27,710 --> 00:00:29,370 ‫Quindi, di solito, quando 11 00:00:29,370 --> 00:00:32,020 ‫scriviamo codice, consumeremo continuamente le promesse, ma di 12 00:00:32,020 --> 00:00:34,380 ‫solito non le produrremo così tanto. 13 00:00:34,380 --> 00:00:38,510 ‫E così, async/await lo rende molto più facile da fare. 14 00:00:38,510 --> 00:00:40,070 ‫Ora per usare 15 00:00:40,070 --> 00:00:42,623 ‫async/await, dobbiamo creare una cosiddetta funzione asincrona. 16 00:00:44,610 --> 00:00:47,570 ‫Quindi commentiamo effettivamente questa parte qui, in modo da 17 00:00:47,570 --> 00:00:50,520 ‫non perderla del tutto, nel caso in cui vogliate 18 00:00:50,520 --> 00:00:53,170 ‫tenerla qui come riferimento o qualcosa del genere. 19 00:00:55,240 --> 00:01:00,000 ‫Quindi getDogPic è la funzione che scriveremo. 20 00:01:00,000 --> 00:01:02,210 ‫E ora dobbiamo contrassegnare questa 21 00:01:02,210 --> 00:01:04,350 ‫funzione come funzione asincrona. 22 00:01:04,350 --> 00:01:05,883 ‫Quindi utilizziamo asincrono 23 00:01:07,840 --> 00:01:11,390 ‫qui e quindi creiamo la funzione come facciamo normalmente. 24 00:01:11,390 --> 00:01:14,260 ‫Quindi questa parola chiave asincrona qui significa 25 00:01:14,260 --> 00:01:17,430 ‫semplicemente che questa è una funzione speciale asincrona. 26 00:01:17,430 --> 00:01:19,780 ‫Quindi, in pratica, uno che continua a 27 00:01:19,780 --> 00:01:22,350 ‫funzionare in background durante l'esecuzione del codice in esso 28 00:01:22,350 --> 00:01:25,540 ‫contenuto, mentre il resto del codice continua a essere eseguito nell'Event Loop. 29 00:01:25,540 --> 00:01:28,680 ‫Quindi queste funzioni asincrone funzioneranno in 30 00:01:28,680 --> 00:01:31,873 ‫modo asincrono senza mai bloccare l'Event Loop, ok? 31 00:01:31,873 --> 00:01:33,980 ‫Questa funzione asincrona restituirà automaticamente 32 00:01:33,980 --> 00:01:35,490 ‫anche una Promessa. 33 00:01:35,490 --> 00:01:37,723 ‫Ma ne parleremo più avanti in questo video. 34 00:01:38,840 --> 00:01:40,610 ‫Per ora ciò che è veramente 35 00:01:40,610 --> 00:01:44,200 ‫importante sapere è che all'interno di una funzione asincrona possiamo sempre avere 36 00:01:44,200 --> 00:01:46,420 ‫una o più espressioni di attesa ed 37 00:01:46,420 --> 00:01:48,000 ‫è così che funzionano. 38 00:01:48,000 --> 00:01:50,453 ‫Quindi usiamo wait e poi Promise qui. 39 00:01:51,540 --> 00:01:55,690 ‫Allora cominciamo con questo, ok? 40 00:01:55,690 --> 00:02:00,320 ‫E poi possiamo salvare il risultato di ciò in una variabile. 41 00:02:00,320 --> 00:02:01,800 ‫In questo caso i dati. 42 00:02:01,800 --> 00:02:05,470 ‫Ok, quindi questo qui sarà come avere 43 00:02:05,470 --> 00:02:08,080 ‫questo pezzo di codice. 44 00:02:08,080 --> 00:02:10,190 ‫Quindi vediamo cosa succede qui. 45 00:02:10,190 --> 00:02:13,060 ‫Quindi questo wait qui fondamentalmente interromperà l'esecuzione 46 00:02:13,060 --> 00:02:17,680 ‫del codice a questo punto fino a quando questa Promessa non sarà risolta. 47 00:02:17,680 --> 00:02:19,960 ‫Ora, se la Promessa è 48 00:02:19,960 --> 00:02:22,490 ‫soddisfatta, il che significa che ha 49 00:02:22,490 --> 00:02:24,660 ‫avuto successo, il valore 50 00:02:24,660 --> 00:02:27,540 ‫dell'espressione di attesa è il valore risolto 51 00:02:27,540 --> 00:02:32,280 ‫della Promessa, che viene infine assegnato alla variabile di dati, ok? 52 00:02:32,280 --> 00:02:34,500 ‫Quindi, invece di avere la Promessa e 53 00:02:34,500 --> 00:02:36,300 ‫poi il metodo then su 54 00:02:36,300 --> 00:02:39,120 ‫di essa, che quindi ottiene i dati come argomento. 55 00:02:39,120 --> 00:02:41,560 ‫Con async/await è molto più semplice. 56 00:02:41,560 --> 00:02:45,400 ‫Tutto ciò che facciamo è sostanzialmente interrompere l'esecuzione del codice a questa 57 00:02:45,400 --> 00:02:47,960 ‫Promessa qui, attendere fino a quando non 58 00:02:47,960 --> 00:02:52,330 ‫ritorna con il suo valore e quindi memorizzare quel valore in una variabile. 59 00:02:52,330 --> 00:02:54,230 ‫E in questo modo il codice 60 00:02:54,230 --> 00:02:56,490 ‫è ancora più facile da capire rispetto a prima. 61 00:02:56,490 --> 00:02:58,600 ‫E questo è il 62 00:02:58,600 --> 00:03:02,220 ‫punto centrale di async/await: è far sembrare il nostro 63 00:03:02,220 --> 00:03:04,910 ‫codice più simile al codice sincrono mentre 64 00:03:04,910 --> 00:03:08,200 ‫in realtà è ancora asincrono dietro le quinte, ok? 65 00:03:08,200 --> 00:03:12,810 ‫Quindi continuiamo con questo e copiamo i pezzi da 66 00:03:12,810 --> 00:03:17,060 ‫questo esempio prima in quello nuovo, ok? 67 00:03:17,060 --> 00:03:22,010 ‫Quindi, prima, avevamo la nostra Promise, poi avevamo il nostro gestore di allora 68 00:03:22,010 --> 00:03:24,750 ‫e poi registravamo i dati sulla console. 69 00:03:24,750 --> 00:03:26,380 ‫Quindi questo è esattamente 70 00:03:26,380 --> 00:03:29,160 ‫quello che abbiamo, semplicemente in un modo diverso qui. 71 00:03:29,160 --> 00:03:31,240 ‫Quindi otteniamo i nostri dati memorizzati nella 72 00:03:31,240 --> 00:03:33,110 ‫variabile e quindi li registriamo qui. 73 00:03:33,110 --> 00:03:37,210 ‫Successivamente, otteniamo l'immagine del cane dall'API. 74 00:03:37,210 --> 00:03:42,210 ‫Quindi abbiamo la variabile res, quindi sarà questa. 75 00:03:42,260 --> 00:03:44,570 ‫Quindi, di nuovo, il risultato dell'handler 76 00:03:46,660 --> 00:03:50,693 ‫di allora e attendiamo questa Promessa qui per tornare con i dati. 77 00:03:53,250 --> 00:03:55,443 ‫Spero che questo stia iniziando ad avere un senso ora. 78 00:04:00,180 --> 00:04:04,180 ‫Quindi, dopo, lo registriamo sulla console, quindi il risultato 79 00:04:04,180 --> 00:04:06,440 ‫di quella chiamata API. 80 00:04:06,440 --> 00:04:09,250 ‫E infine, usiamo la nostra ultima 81 00:04:09,250 --> 00:04:12,430 ‫Promessa per scrivere quella stringa in un file. 82 00:04:12,430 --> 00:04:15,260 ‫Quindi questa è questa Promessa 83 00:04:15,260 --> 00:04:19,110 ‫qui, e questa non risolve alcun valore significativo. 84 00:04:19,110 --> 00:04:22,570 ‫E quindi non abbiamo nemmeno bisogno di memorizzare nulla in una variabile. 85 00:04:22,570 --> 00:04:25,050 ‫Tutto ciò che facciamo è fermare il 86 00:04:25,050 --> 00:04:28,080 ‫codice qui fino al termine del processo di scrittura. 87 00:04:28,080 --> 00:04:30,580 ‫E poi accedi alla console 88 00:04:32,690 --> 00:04:34,003 ‫questa stringa. 89 00:04:35,561 --> 00:04:39,270 ‫Quindi, se confronti questo codice con quello che avevamo 90 00:04:39,270 --> 00:04:41,640 ‫prima, sembra molto più pulito 91 00:04:41,640 --> 00:04:45,170 ‫e molto più facile da capire, non è vero? 92 00:04:45,170 --> 00:04:47,300 ‫Ora, per fare in modo che funzioni, 93 00:04:47,300 --> 00:04:50,520 ‫tutto ciò che dobbiamo fare è chiamare effettivamente questa funzione qui. 94 00:04:50,520 --> 00:04:54,080 ‫Salvalo e in effetti funziona ancora. 95 00:04:54,080 --> 00:04:56,700 ‫Quindi otteniamo ancora il nostro risultato. 96 00:04:56,700 --> 00:04:58,830 ‫Tutto funziona ancora allo stesso modo. 97 00:04:58,830 --> 00:05:00,570 ‫Quindi è fantastico, vero? 98 00:05:00,570 --> 00:05:02,560 ‫Solo un'ultima cosa che dobbiamo fare qui è 99 00:05:02,560 --> 00:05:04,170 ‫la nostra gestione degli errori. 100 00:05:04,170 --> 00:05:08,080 ‫Perché in questo momento non stiamo gestendo errori da nessuna parte, giusto? 101 00:05:08,080 --> 00:05:10,750 ‫Quindi quaggiù abbiamo usato il metodo catch, ma 102 00:05:10,750 --> 00:05:12,650 ‫in questo momento non 103 00:05:12,650 --> 00:05:15,260 ‫possiamo davvero collegarlo da nessuna parte, vero? 104 00:05:15,260 --> 00:05:16,920 ‫Quindi, invece, quello 105 00:05:16,920 --> 00:05:20,130 ‫che facciamo qui è usare qualcosa chiamato try-catch. 106 00:05:20,130 --> 00:05:22,860 ‫E in realtà questo non ha nulla a che fare 107 00:05:22,860 --> 00:05:25,180 ‫con async/await, è una funzione JavaScript standard. 108 00:05:25,180 --> 00:05:26,853 ‫Quindi lascia che ti mostri come funziona. 109 00:05:28,130 --> 00:05:32,593 ‫Quindi fondamentalmente avvolgiamo tutto il nostro codice in un blocco try. 110 00:05:34,150 --> 00:05:35,500 ‫Quindi fondamentalmente il 111 00:05:35,500 --> 00:05:38,340 ‫codice proverà a eseguire qualunque cosa ci sia qui. 112 00:05:38,340 --> 00:05:41,240 ‫E poi abbiamo anche bisogno di un blocco 113 00:05:41,240 --> 00:05:44,780 ‫catch, che avrà accesso a un errore se ce n'è uno. 114 00:05:44,780 --> 00:05:47,950 ‫Quindi, se si verifica un errore in questo blocco qui, 115 00:05:47,950 --> 00:05:49,960 ‫uscirà immediatamente da questo blocco, 116 00:05:49,960 --> 00:05:52,060 ‫questo blocco try qui, quindi questo. 117 00:05:52,060 --> 00:05:55,070 ‫E vai immediatamente nel blocco catch e ci 118 00:05:55,070 --> 00:05:57,290 ‫darà accesso all'errore che si è 119 00:05:57,290 --> 00:05:59,323 ‫verificato nel blocco try. 120 00:06:00,760 --> 00:06:04,227 ‫Quindi ora, tutto ciò che dobbiamo fare è prendere questo 121 00:06:04,227 --> 00:06:06,510 ‫pezzo di codice per questo registro 122 00:06:06,510 --> 00:06:09,163 ‫della console, metterlo qui, salvarlo e ora funziona. 123 00:06:10,320 --> 00:06:11,460 ‫Giusto per causare 124 00:06:11,460 --> 00:06:14,120 ‫un errore ora, cambiamo di nuovo questo qui. 125 00:06:14,120 --> 00:06:16,970 ‫E infatti, non sono riuscito a trovare quel file. 126 00:06:16,970 --> 00:06:20,040 ‫Quindi questa Promessa qui è stata rifiutata, giusto? 127 00:06:20,040 --> 00:06:23,290 ‫Quindi questa Promessa è stata rifiutata e quindi c'è stato 128 00:06:23,290 --> 00:06:26,960 ‫un errore e subito è entrato nel blocco catch e quindi 129 00:06:26,960 --> 00:06:29,253 ‫ha registrato questo errore nella console. 130 00:06:31,610 --> 00:06:32,443 ‫Rimettilo a posto. 131 00:06:34,040 --> 00:06:36,930 ‫E ora, in effetti, funziona di nuovo. 132 00:06:36,930 --> 00:06:39,930 ‫Ok, è così che funziona async/await. 133 00:06:39,930 --> 00:06:42,420 ‫Quindi ricorda che possiamo usare wait solo se 134 00:06:42,420 --> 00:06:44,450 ‫è all'interno di una funzione asincrona. 135 00:06:44,450 --> 00:06:46,880 ‫Ecco perché viene sempre chiamato insieme, quindi 136 00:06:46,880 --> 00:06:49,270 ‫aspetta sempre la barra asincrona. 137 00:06:49,270 --> 00:06:53,070 ‫Perché queste due caratteristiche, si appartengono strettamente insieme. 138 00:06:53,070 --> 00:06:54,835 ‫Quindi, solo per ricapitolare 139 00:06:54,835 --> 00:06:57,260 ‫rapidamente, async/await ci consente invece di avere 140 00:06:57,260 --> 00:06:59,270 ‫tutti questi gestori con queste 141 00:06:59,270 --> 00:07:01,630 ‫funzioni di callback al loro interno. 142 00:07:01,630 --> 00:07:05,590 ‫Ci consente di rendere il nostro codice più sincrono. 143 00:07:05,590 --> 00:07:09,180 ‫Quindi tutto ciò che facciamo è usare la parola chiave 144 00:07:09,180 --> 00:07:11,340 ‫wait davanti alla nostra Promessa. 145 00:07:11,340 --> 00:07:13,380 ‫E poi aspetterà che quella Promessa 146 00:07:13,380 --> 00:07:15,400 ‫torni con il suo risultato. 147 00:07:15,400 --> 00:07:17,000 ‫Ricorda solo che questo è 148 00:07:17,000 --> 00:07:19,360 ‫ciò che chiamiamo zucchero sintattico per le promesse. 149 00:07:19,360 --> 00:07:22,650 ‫Quindi fa semplicemente sembrare le promesse più belle, ma dietro le 150 00:07:22,650 --> 00:07:25,610 ‫quinte tutto funziona ancora allo stesso modo con la 151 00:07:25,610 --> 00:07:28,470 ‫logica della Promessa che ti ho spiegato prima. 152 00:07:28,470 --> 00:07:30,240 ‫Quindi, ancora una volta, questo è 153 00:07:30,240 --> 00:07:32,750 ‫solo per semplificarci la vita durante la codifica e 154 00:07:32,750 --> 00:07:35,520 ‫rendere il nostro codice un po' più simile al codice sincrono. 155 00:07:35,520 --> 00:07:37,430 ‫Quindi è così che implementiamo async/await. 156 00:07:37,430 --> 00:07:38,810 ‫Nel prossimo video 157 00:07:38,810 --> 00:07:42,863 ‫impareremo qualcosa in più su come funzionano effettivamente le funzioni asincrone.