‫Instrutor: Agora vamos falar sobre
‫um incrível recurso de JavaScript assíncrono chamado async / await.
‫Portanto, as promessas já tornaram nosso código muito
‫melhor, mas ainda podemos fazer melhor.
‫Portanto, em vez de consumir promessas, com o método then, que
‫ainda nos faz usar todas essas funções de retorno de chamada,
‫podemos usar algo chamado async / await.
‫Esse é um novo recurso introduzido no JavaScript no ES8,
‫que tornará nossas vidas muito mais fáceis.
‫Normalmente, quando escrevemos
‫código, consumimos promessas o tempo todo,
‫mas normalmente não as produzimos tanto.
‫E assim, async / await torna isso muito mais fácil de fazer.
‫Agora, para usar async
‫/ await, precisamos criar uma função chamada de async.
‫Então, vamos comentar essa parte aqui, para que
‫não a percamos totalmente, caso você queira mantê-la
‫aqui como uma referência ou algo assim.
‫Portanto, getDogPic é a função que iremos escrever.
‫E agora precisamos marcar esta função
‫como uma função assíncrona.
‫Portanto, usamos async
‫aqui e, em seguida, criamos a função como normalmente fazemos.
‫Portanto, esta palavra-chave async aqui simplesmente significa
‫que esta é uma função especial que é assíncrona.
‫Então, basicamente, aquele que continua sendo executado em
‫segundo plano enquanto executa o código que está nele,
‫enquanto o resto do código continua em execução no loop de eventos.
‫Portanto, essas funções assíncronas farão trabalho assíncrono
‫sem nunca bloquear o loop de eventos, certo?
‫Esta função assíncrona também retornará
‫automaticamente uma promessa.
‫Mais sobre isso um pouco mais tarde neste vídeo.
‫Por enquanto, o que é realmente
‫importante saber é que dentro de uma função assíncrona podemos sempre ter
‫uma ou mais expressões de espera e
‫é assim que funcionam.
‫Portanto, usamos o Wait e a Promise aqui.
‫Então vamos começar com este, ok?
‫E então podemos salvar o resultado disso em uma variável.
‫Nesse caso, dados.
‫Ok, então isso aqui será o mesmo que
‫ter este pedaço de código.
‫Então, vamos ver o que acontece aqui.
‫Portanto, esta espera aqui basicamente impedirá
‫a execução do código neste ponto até que esta promessa seja resolvida.
‫Agora, se a promessa for
‫cumprida, o que significa que ela
‫foi bem-sucedida, o valor
‫da expressão await é o valor resolvido
‫da promessa, que é finalmente atribuído à variável de dados, certo?
‫Então, em vez de ter a
‫promessa e o método
‫then, que obtém os dados como um argumento.
‫Com async / await é muito mais simples.
‫Tudo o que fazemos é basicamente parar a execução do código
‫nesta promessa aqui, esperar até que ele
‫volte com seu valor e, em seguida, armazenar esse valor em uma variável.
‫E assim o código é
‫ainda mais fácil de entender do que antes.
‫E esse é todo
‫o objetivo de async / await: é fazer com que
‫nosso código pareça mais com código síncrono,
‫embora na verdade ainda seja assíncrono nos bastidores, certo?
‫Então, vamos continuar com isso e apenas copiar as
‫partes deste exemplo anterior para o novo, ok?
‫Portanto, antes, tínhamos nossa promessa, então tínhamos nosso manipulador e então
‫registramos os dados no console.
‫Então é exatamente isso
‫que temos, simplesmente de uma maneira diferente aqui.
‫Portanto, obtemos nossos dados armazenados na
‫variável e os registramos aqui.
‫Em seguida, obtemos a imagem do cachorro da API.
‫Então nós temos a variável res, então esta será esta.
‫Então, novamente, o resultado do
‫manipulador e aguardamos esta promessa aqui para voltar com os dados.
‫Espero que isso comece a fazer sentido agora.
‫Depois disso, registramos isso no console, o resultado
‫dessa chamada de API.
‫E, finalmente, usamos nossa última promessa
‫para gravar essa string em um arquivo.
‫Então essa é essa promessa
‫aqui, e essa não resolve nenhum valor significativo.
‫E, portanto, nem mesmo precisamos armazenar nada em uma variável.
‫Tudo o que fazemos é parar o
‫código aqui até que o processo de escrita seja concluído.
‫E então registre no console
‫esta string.
‫Então, se você comparar bem este código com o
‫que tínhamos antes, parece muito
‫mais limpo e mais fácil de entender, não é?
‫Agora, para fazer isso funcionar, tudo
‫o que temos que fazer é realmente chamar essa função aqui.
‫Salve e ele ainda funcionará.
‫Portanto, ainda obtemos nosso resultado.
‫Tudo ainda funciona do mesmo.
‫Então isso é incrível, certo?
‫Apenas uma última coisa que precisamos fazer aqui
‫é nosso tratamento de erros.
‫Porque, no momento, não estamos lidando com erros em lugar nenhum, certo?
‫Então, aqui embaixo usamos o método catch,
‫mas agora, não podemos
‫realmente anexá-lo a qualquer lugar, podemos?
‫Em vez disso, o
‫que fazemos aqui é usar algo chamado try-catch.
‫E, na verdade, isso não tem nada a ver com
‫async / await, é um recurso JavaScript padrão.
‫Deixe-me mostrar como funciona.
‫Então, basicamente envolvemos todo o nosso código em um bloco try.
‫Então, basicamente, o
‫código tentará executar o que quer que esteja aqui.
‫E então também precisamos de um bloco
‫catch, que terá acesso a um erro, se houver.
‫Então se acontecer um erro nesse bloco aqui, ele vai
‫sair imediatamente desse bloco, esse
‫bloco try aqui, então esse aqui.
‫E imediatamente vá para o bloco catch, e
‫nos dará acesso ao erro que
‫aconteceu no bloco try.
‫Agora, tudo o que temos que fazer é pegar esse pedaço
‫de código para este log do
‫console, colocá-lo aqui, salvá-lo e agora ele funciona.
‫Só para causar
‫um erro agora, vamos alterá-lo aqui novamente.
‫E, de fato, não consegui encontrar esse arquivo.
‫Então essa promessa aqui rejeitada, certo?
‫Essa promessa foi rejeitada e ocorreu um erro
‫e imediatamente entrou no bloco catch e registrou
‫esse erro no console.
‫Ponha de volta.
‫E agora, de fato, funciona novamente.
‫Ok, então é assim que funciona assíncrono / espera.
‫Portanto, lembre-se de que só podemos usar await se
‫estiver dentro de uma função assíncrona.
‫É por isso que é sempre chamado junto,
‫então sempre a barra assíncrona espera.
‫Porque esses dois recursos, eles estão intimamente ligados.
‫Então, apenas para recapitular
‫rapidamente, async / await nos permite, em vez
‫de ter todos esses manipuladores com
‫essas funções de retorno de chamada neles.
‫Isso nos permite fazer nosso código parecer mais síncrono.
‫Portanto, tudo o que fazemos é usar a palavra-chave
‫await antes de nossa promessa.
‫E então vai esperar que a Promessa
‫volte com o seu resultado.
‫Lembre-se de que isso é
‫o que chamamos de açúcar sintático para promessas.
‫Então, ele simplesmente faz as promessas parecerem mais bonitas, mas nos
‫bastidores tudo ainda funciona da mesma forma com a lógica
‫da promessa que eu expliquei a você antes.
‫Então, novamente, isso é apenas para
‫tornar nossas vidas um pouco mais fáceis ao codificar
‫e fazer nosso código parecer um pouco mais com código síncrono.
‫Portanto, é assim que implementamos async / await.
‫No próximo vídeo,
‫aprenderemos um pouco mais sobre como as funções assíncronas realmente funcionam.