1 00:00:01,340 --> 00:00:03,150 ‫Instrutor: Agora vamos falar sobre 2 00:00:03,150 --> 00:00:06,643 ‫um incrível recurso de JavaScript assíncrono chamado async / await. 3 00:00:08,040 --> 00:00:11,023 ‫Portanto, as promessas já tornaram nosso código muito 4 00:00:11,023 --> 00:00:13,340 ‫melhor, mas ainda podemos fazer melhor. 5 00:00:13,340 --> 00:00:16,400 ‫Portanto, em vez de consumir promessas, com o método then, que 6 00:00:16,400 --> 00:00:19,380 ‫ainda nos faz usar todas essas funções de retorno de chamada, 7 00:00:19,380 --> 00:00:21,440 ‫podemos usar algo chamado async / await. 8 00:00:21,440 --> 00:00:25,040 ‫Esse é um novo recurso introduzido no JavaScript no ES8, 9 00:00:25,040 --> 00:00:27,710 ‫que tornará nossas vidas muito mais fáceis. 10 00:00:27,710 --> 00:00:29,370 ‫Normalmente, quando escrevemos 11 00:00:29,370 --> 00:00:32,020 ‫código, consumimos promessas o tempo todo, 12 00:00:32,020 --> 00:00:34,380 ‫mas normalmente não as produzimos tanto. 13 00:00:34,380 --> 00:00:38,510 ‫E assim, async / await torna isso muito mais fácil de fazer. 14 00:00:38,510 --> 00:00:40,070 ‫Agora, para usar async 15 00:00:40,070 --> 00:00:42,623 ‫/ await, precisamos criar uma função chamada de async. 16 00:00:44,610 --> 00:00:47,570 ‫Então, vamos comentar essa parte aqui, para que 17 00:00:47,570 --> 00:00:50,520 ‫não a percamos totalmente, caso você queira mantê-la 18 00:00:50,520 --> 00:00:53,170 ‫aqui como uma referência ou algo assim. 19 00:00:55,240 --> 00:01:00,000 ‫Portanto, getDogPic é a função que iremos escrever. 20 00:01:00,000 --> 00:01:02,210 ‫E agora precisamos marcar esta função 21 00:01:02,210 --> 00:01:04,350 ‫como uma função assíncrona. 22 00:01:04,350 --> 00:01:05,883 ‫Portanto, usamos async 23 00:01:07,840 --> 00:01:11,390 ‫aqui e, em seguida, criamos a função como normalmente fazemos. 24 00:01:11,390 --> 00:01:14,260 ‫Portanto, esta palavra-chave async aqui simplesmente significa 25 00:01:14,260 --> 00:01:17,430 ‫que esta é uma função especial que é assíncrona. 26 00:01:17,430 --> 00:01:19,780 ‫Então, basicamente, aquele que continua sendo executado em 27 00:01:19,780 --> 00:01:22,350 ‫segundo plano enquanto executa o código que está nele, 28 00:01:22,350 --> 00:01:25,540 ‫enquanto o resto do código continua em execução no loop de eventos. 29 00:01:25,540 --> 00:01:28,680 ‫Portanto, essas funções assíncronas farão trabalho assíncrono 30 00:01:28,680 --> 00:01:31,873 ‫sem nunca bloquear o loop de eventos, certo? 31 00:01:31,873 --> 00:01:33,980 ‫Esta função assíncrona também retornará 32 00:01:33,980 --> 00:01:35,490 ‫automaticamente uma promessa. 33 00:01:35,490 --> 00:01:37,723 ‫Mais sobre isso um pouco mais tarde neste vídeo. 34 00:01:38,840 --> 00:01:40,610 ‫Por enquanto, o que é realmente 35 00:01:40,610 --> 00:01:44,200 ‫importante saber é que dentro de uma função assíncrona podemos sempre ter 36 00:01:44,200 --> 00:01:46,420 ‫uma ou mais expressões de espera e 37 00:01:46,420 --> 00:01:48,000 ‫é assim que funcionam. 38 00:01:48,000 --> 00:01:50,453 ‫Portanto, usamos o Wait e a Promise aqui. 39 00:01:51,540 --> 00:01:55,690 ‫Então vamos começar com este, ok? 40 00:01:55,690 --> 00:02:00,320 ‫E então podemos salvar o resultado disso em uma variável. 41 00:02:00,320 --> 00:02:01,800 ‫Nesse caso, dados. 42 00:02:01,800 --> 00:02:05,470 ‫Ok, então isso aqui será o mesmo que 43 00:02:05,470 --> 00:02:08,080 ‫ter este pedaço de código. 44 00:02:08,080 --> 00:02:10,190 ‫Então, vamos ver o que acontece aqui. 45 00:02:10,190 --> 00:02:13,060 ‫Portanto, esta espera aqui basicamente impedirá 46 00:02:13,060 --> 00:02:17,680 ‫a execução do código neste ponto até que esta promessa seja resolvida. 47 00:02:17,680 --> 00:02:19,960 ‫Agora, se a promessa for 48 00:02:19,960 --> 00:02:22,490 ‫cumprida, o que significa que ela 49 00:02:22,490 --> 00:02:24,660 ‫foi bem-sucedida, o valor 50 00:02:24,660 --> 00:02:27,540 ‫da expressão await é o valor resolvido 51 00:02:27,540 --> 00:02:32,280 ‫da promessa, que é finalmente atribuído à variável de dados, certo? 52 00:02:32,280 --> 00:02:34,500 ‫Então, em vez de ter a 53 00:02:34,500 --> 00:02:36,300 ‫promessa e o método 54 00:02:36,300 --> 00:02:39,120 ‫then, que obtém os dados como um argumento. 55 00:02:39,120 --> 00:02:41,560 ‫Com async / await é muito mais simples. 56 00:02:41,560 --> 00:02:45,400 ‫Tudo o que fazemos é basicamente parar a execução do código 57 00:02:45,400 --> 00:02:47,960 ‫nesta promessa aqui, esperar até que ele 58 00:02:47,960 --> 00:02:52,330 ‫volte com seu valor e, em seguida, armazenar esse valor em uma variável. 59 00:02:52,330 --> 00:02:54,230 ‫E assim o código é 60 00:02:54,230 --> 00:02:56,490 ‫ainda mais fácil de entender do que antes. 61 00:02:56,490 --> 00:02:58,600 ‫E esse é todo 62 00:02:58,600 --> 00:03:02,220 ‫o objetivo de async / await: é fazer com que 63 00:03:02,220 --> 00:03:04,910 ‫nosso código pareça mais com código síncrono, 64 00:03:04,910 --> 00:03:08,200 ‫embora na verdade ainda seja assíncrono nos bastidores, certo? 65 00:03:08,200 --> 00:03:12,810 ‫Então, vamos continuar com isso e apenas copiar as 66 00:03:12,810 --> 00:03:17,060 ‫partes deste exemplo anterior para o novo, ok? 67 00:03:17,060 --> 00:03:22,010 ‫Portanto, antes, tínhamos nossa promessa, então tínhamos nosso manipulador e então 68 00:03:22,010 --> 00:03:24,750 ‫registramos os dados no console. 69 00:03:24,750 --> 00:03:26,380 ‫Então é exatamente isso 70 00:03:26,380 --> 00:03:29,160 ‫que temos, simplesmente de uma maneira diferente aqui. 71 00:03:29,160 --> 00:03:31,240 ‫Portanto, obtemos nossos dados armazenados na 72 00:03:31,240 --> 00:03:33,110 ‫variável e os registramos aqui. 73 00:03:33,110 --> 00:03:37,210 ‫Em seguida, obtemos a imagem do cachorro da API. 74 00:03:37,210 --> 00:03:42,210 ‫Então nós temos a variável res, então esta será esta. 75 00:03:42,260 --> 00:03:44,570 ‫Então, novamente, o resultado do 76 00:03:46,660 --> 00:03:50,693 ‫manipulador e aguardamos esta promessa aqui para voltar com os dados. 77 00:03:53,250 --> 00:03:55,443 ‫Espero que isso comece a fazer sentido agora. 78 00:04:00,180 --> 00:04:04,180 ‫Depois disso, registramos isso no console, o resultado 79 00:04:04,180 --> 00:04:06,440 ‫dessa chamada de API. 80 00:04:06,440 --> 00:04:09,250 ‫E, finalmente, usamos nossa última promessa 81 00:04:09,250 --> 00:04:12,430 ‫para gravar essa string em um arquivo. 82 00:04:12,430 --> 00:04:15,260 ‫Então essa é essa promessa 83 00:04:15,260 --> 00:04:19,110 ‫aqui, e essa não resolve nenhum valor significativo. 84 00:04:19,110 --> 00:04:22,570 ‫E, portanto, nem mesmo precisamos armazenar nada em uma variável. 85 00:04:22,570 --> 00:04:25,050 ‫Tudo o que fazemos é parar o 86 00:04:25,050 --> 00:04:28,080 ‫código aqui até que o processo de escrita seja concluído. 87 00:04:28,080 --> 00:04:30,580 ‫E então registre no console 88 00:04:32,690 --> 00:04:34,003 ‫esta string. 89 00:04:35,561 --> 00:04:39,270 ‫Então, se você comparar bem este código com o 90 00:04:39,270 --> 00:04:41,640 ‫que tínhamos antes, parece muito 91 00:04:41,640 --> 00:04:45,170 ‫mais limpo e mais fácil de entender, não é? 92 00:04:45,170 --> 00:04:47,300 ‫Agora, para fazer isso funcionar, tudo 93 00:04:47,300 --> 00:04:50,520 ‫o que temos que fazer é realmente chamar essa função aqui. 94 00:04:50,520 --> 00:04:54,080 ‫Salve e ele ainda funcionará. 95 00:04:54,080 --> 00:04:56,700 ‫Portanto, ainda obtemos nosso resultado. 96 00:04:56,700 --> 00:04:58,830 ‫Tudo ainda funciona do mesmo. 97 00:04:58,830 --> 00:05:00,570 ‫Então isso é incrível, certo? 98 00:05:00,570 --> 00:05:02,560 ‫Apenas uma última coisa que precisamos fazer aqui 99 00:05:02,560 --> 00:05:04,170 ‫é nosso tratamento de erros. 100 00:05:04,170 --> 00:05:08,080 ‫Porque, no momento, não estamos lidando com erros em lugar nenhum, certo? 101 00:05:08,080 --> 00:05:10,750 ‫Então, aqui embaixo usamos o método catch, 102 00:05:10,750 --> 00:05:12,650 ‫mas agora, não podemos 103 00:05:12,650 --> 00:05:15,260 ‫realmente anexá-lo a qualquer lugar, podemos? 104 00:05:15,260 --> 00:05:16,920 ‫Em vez disso, o 105 00:05:16,920 --> 00:05:20,130 ‫que fazemos aqui é usar algo chamado try-catch. 106 00:05:20,130 --> 00:05:22,860 ‫E, na verdade, isso não tem nada a ver com 107 00:05:22,860 --> 00:05:25,180 ‫async / await, é um recurso JavaScript padrão. 108 00:05:25,180 --> 00:05:26,853 ‫Deixe-me mostrar como funciona. 109 00:05:28,130 --> 00:05:32,593 ‫Então, basicamente envolvemos todo o nosso código em um bloco try. 110 00:05:34,150 --> 00:05:35,500 ‫Então, basicamente, o 111 00:05:35,500 --> 00:05:38,340 ‫código tentará executar o que quer que esteja aqui. 112 00:05:38,340 --> 00:05:41,240 ‫E então também precisamos de um bloco 113 00:05:41,240 --> 00:05:44,780 ‫catch, que terá acesso a um erro, se houver. 114 00:05:44,780 --> 00:05:47,950 ‫Então se acontecer um erro nesse bloco aqui, ele vai 115 00:05:47,950 --> 00:05:49,960 ‫sair imediatamente desse bloco, esse 116 00:05:49,960 --> 00:05:52,060 ‫bloco try aqui, então esse aqui. 117 00:05:52,060 --> 00:05:55,070 ‫E imediatamente vá para o bloco catch, e 118 00:05:55,070 --> 00:05:57,290 ‫nos dará acesso ao erro que 119 00:05:57,290 --> 00:05:59,323 ‫aconteceu no bloco try. 120 00:06:00,760 --> 00:06:04,227 ‫Agora, tudo o que temos que fazer é pegar esse pedaço 121 00:06:04,227 --> 00:06:06,510 ‫de código para este log do 122 00:06:06,510 --> 00:06:09,163 ‫console, colocá-lo aqui, salvá-lo e agora ele funciona. 123 00:06:10,320 --> 00:06:11,460 ‫Só para causar 124 00:06:11,460 --> 00:06:14,120 ‫um erro agora, vamos alterá-lo aqui novamente. 125 00:06:14,120 --> 00:06:16,970 ‫E, de fato, não consegui encontrar esse arquivo. 126 00:06:16,970 --> 00:06:20,040 ‫Então essa promessa aqui rejeitada, certo? 127 00:06:20,040 --> 00:06:23,290 ‫Essa promessa foi rejeitada e ocorreu um erro 128 00:06:23,290 --> 00:06:26,960 ‫e imediatamente entrou no bloco catch e registrou 129 00:06:26,960 --> 00:06:29,253 ‫esse erro no console. 130 00:06:31,610 --> 00:06:32,443 ‫Ponha de volta. 131 00:06:34,040 --> 00:06:36,930 ‫E agora, de fato, funciona novamente. 132 00:06:36,930 --> 00:06:39,930 ‫Ok, então é assim que funciona assíncrono / espera. 133 00:06:39,930 --> 00:06:42,420 ‫Portanto, lembre-se de que só podemos usar await se 134 00:06:42,420 --> 00:06:44,450 ‫estiver dentro de uma função assíncrona. 135 00:06:44,450 --> 00:06:46,880 ‫É por isso que é sempre chamado junto, 136 00:06:46,880 --> 00:06:49,270 ‫então sempre a barra assíncrona espera. 137 00:06:49,270 --> 00:06:53,070 ‫Porque esses dois recursos, eles estão intimamente ligados. 138 00:06:53,070 --> 00:06:54,835 ‫Então, apenas para recapitular 139 00:06:54,835 --> 00:06:57,260 ‫rapidamente, async / await nos permite, em vez 140 00:06:57,260 --> 00:06:59,270 ‫de ter todos esses manipuladores com 141 00:06:59,270 --> 00:07:01,630 ‫essas funções de retorno de chamada neles. 142 00:07:01,630 --> 00:07:05,590 ‫Isso nos permite fazer nosso código parecer mais síncrono. 143 00:07:05,590 --> 00:07:09,180 ‫Portanto, tudo o que fazemos é usar a palavra-chave 144 00:07:09,180 --> 00:07:11,340 ‫await antes de nossa promessa. 145 00:07:11,340 --> 00:07:13,380 ‫E então vai esperar que a Promessa 146 00:07:13,380 --> 00:07:15,400 ‫volte com o seu resultado. 147 00:07:15,400 --> 00:07:17,000 ‫Lembre-se de que isso é 148 00:07:17,000 --> 00:07:19,360 ‫o que chamamos de açúcar sintático para promessas. 149 00:07:19,360 --> 00:07:22,650 ‫Então, ele simplesmente faz as promessas parecerem mais bonitas, mas nos 150 00:07:22,650 --> 00:07:25,610 ‫bastidores tudo ainda funciona da mesma forma com a lógica 151 00:07:25,610 --> 00:07:28,470 ‫da promessa que eu expliquei a você antes. 152 00:07:28,470 --> 00:07:30,240 ‫Então, novamente, isso é apenas para 153 00:07:30,240 --> 00:07:32,750 ‫tornar nossas vidas um pouco mais fáceis ao codificar 154 00:07:32,750 --> 00:07:35,520 ‫e fazer nosso código parecer um pouco mais com código síncrono. 155 00:07:35,520 --> 00:07:37,430 ‫Portanto, é assim que implementamos async / await. 156 00:07:37,430 --> 00:07:38,810 ‫No próximo vídeo, 157 00:07:38,810 --> 00:07:42,863 ‫aprenderemos um pouco mais sobre como as funções assíncronas realmente funcionam.