‫Instrutor: Então, você
‫já aprendeu como usar um Async
‫/ Await, mas na verdade há um
‫pouco mais para aprender sobre como as funções Async realmente funcionam.
‫Então vamos fazer isso agora.
‫Para entender um pouco melhor o que acontece aqui, vamos
‫tentar adicionar algum console. logs depois e
‫antes de chamar as funções Async aqui.
‫Ok, então console. log
‫Então, a primeira
‫etapa obterá fotos de
‫cães, certo.
‫E então o número dois.
‫Aqui,
‫vamos apenas dizer, cansei de tirar fotos de cães.
‫OK. Então, vamos salvar.
‫E uau, o que aconteceu aqui.
‫Temos esses dois consoles. logs antes
‫de todos os logs provenientes da função Async.
‫Então temos um, dois para este e
‫este e só
‫depois disso temos as toras
‫provenientes da foto do cachorro.
‫É isso que você esperava?
‫Então, se não, vamos analisar o que aconteceu aqui.
‫Bem, como eu disse antes, essa função Async realmente
‫é executada em segundo plano.
‫Pois bem, é assim que as funções Async
‫simplesmente devem se comportar.
‫Certo, isso faz todo o sentido?
‫Portanto, não podemos simplesmente interromper o código aqui.
‫Assim, assim que atingirmos esta
‫função, não podemos simplesmente interromper a execução de nossa thread principal aqui.
‫Direito?
‫E essa é toda a filosofia de não bloquear
‫o registro de eventos.
‫Portanto, precisamos obter algumas imagens de cães da API, mas
‫isso não é uma desculpa para interromper a execução sobre o código.
‫Então, para bloquear o log de eventos.
‫Portanto, como resultado, quando o mecanismo de script java parar,
‫esta linha de código aqui, ela apenas descarregará a
‫função get dog pic para o fundo e irá
‫direto para a próxima linha.
‫Portanto, este segundo console. faça login aqui.
‫Portanto, faz sentido que primeiro esta string aqui seja registrada, em seguida,
‫ela começará a executar esta função,
‫então imediatamente irá registrar esta linha de código e nesse
‫meio tempo, lemos este arquivo em segundo plano, e
‫assim que isso for pronto,
‫ele vai começar a imprimir esse log, esse log
‫e também esse log.
‫Então é exatamente isso que está acontecendo aqui.
‫Um, dois, e depois os três restantes.
‫Faz sentido? OK.
‫Então, vamos dar um
‫passo adiante e retornar algo de nossa função Async.
‫Portanto, estou alterando isso aqui para três, para
‫que a partir desta função, possamos retornar uma
‫string que diz dois, bem, digamos pronto e, em seguida, vamos adicionar aqui
‫novamente um emoji aqui para torná-lo
‫um pouco mais pop em nosso console.
‫Tão pronto aqui.
‫E então vamos salvar isso.
‫Simplesmente alguma variável, não importa o que seja.
‫E então registre x no console.
‫Então vamos ver o que acontece.
‫E então agora temos essa
‫promessa estranha pendente em vez da string que talvez estivéssemos esperando.
‫Então, por que x está aqui e não esta
‫string, mas esta promessa aqui?
‫Bem, lembra como eu disse no início do
‫último vídeo que uma função
‫Async na verdade retorna uma promessa automaticamente?
‫Bem, então esta aqui é a prova disso.
‫Portanto, em vez de estar pronto para o registro no console neste ponto,
‫ele apenas nos diz que x é uma promessa que
‫neste ponto ainda está em execução e,
‫portanto, ainda está pendente.
‫É por isso que diz pendente aqui.
‫Portanto, o java script pode, obviamente, não saber que x
‫será essa string pronta aqui em algum ponto.
‫E então ele simplesmente passa para o próximo console. log
‫como havíamos discutido antes.
‫E no momento em que o JavaScript realmente
‫sabe que este x aqui deve ser a tensão que retornamos
‫bem naquele ponto, a execução deste código
‫aqui terminou há muito tempo.
‫Mas o que devemos fazer se
‫realmente quisermos obter esse valor de retorno aqui?
‫E se realmente quiséssemos retornar essa string
‫e registrá-la no console?
‫Bem, teríamos que tratar essa função Async
‫como uma promessa.
‫E então usaríamos o método
‫DEN nele ou novamente, usaríamos Async / Await.
‫Deixe-me mostrar como fazer isso.
‫Portanto, em vez de tentar salvar o valor
‫retornado em uma variável, podemos usar o método DEN nela.
‫E então aqui é onde podemos chamá-lo de x.
‫Então console. log x então exatamente como o que
‫tínhamos aqui e então também faríamos este dentro
‫da alça DEN, ok?
‫Então, vamos revisar o que fizemos aqui.
‫Então get dog pic retorna uma promessa, lembra disso?
‫E para cada um que temos uma promessa, usamos o método DEN
‫para obter acesso ao seu valor futuro.
‫Portanto, o valor que acabará por retornar.
‫Nesse caso, esta será a sequência de dois prontos.
‫OK?
‫E se você quiser obter
‫x para isso, precisamos usar o método DEN como acabamos de fazer aqui.
‫E só depois disso podemos registrar a
‫terceira string bem aqui.
‫Portanto, se salvarmos agora
‫desta forma, ele deverá funcionar conforme o esperado.
‫E sim, faz.
‫Portanto, temos nosso primeiro log, depois todos os logs
‫provenientes de nossa função Async e, em seguida, o
‫pronto vindo da linha 42 aqui.
‫E, finalmente, o número 3. Perfeito.
‫E espero que faça todo o sentido para você.
‫Agora, o que acontece se realmente houver um erro?
‫Bem, isso é um pouco mais difícil de lidar.
‫Então, vamos novamente, causar um erro como fizemos antes.
‫Mas você vê que, na verdade, ainda inserimos o
‫método DEN aqui.
‫Então, este bloco aqui, ok.
‫Portanto, mesmo que haja um erro aqui nesta promessa, basicamente
‫ainda se resolve como uma promessa bem-sucedida.
‫Portanto, ele ainda retorna esse valor aqui.
‫E mesmo se adicionarmos nosso manipulador de captura aqui,
‫isso não mudará esse fato.
‫Ok, então vamos usar o catch
‫aqui e então o console. registre e registre o erro
‫aqui para que você possa ver que ainda não registrou nenhum erro.
‫E isso de novo porque esta promessa
‫vinda desta função Async ainda
‫será marcada como bem-sucedida.
‫Mas se você realmente deseja marcá-lo como
‫rejeitado, teremos que fazer algo chamado lançar um erro.
‫Então, vamos fazer isso aqui neste bloco catch.
‫Portanto, se houver um erro, não queremos apenas
‫registrá-lo no console, mas também lançá-lo.
‫Portanto, usamos uma função embutida em JavaScript chamada throw.
‫E com isso podemos lançar um erro.
‫Portanto, isso agora marcará toda a função dessa promessa
‫como rejeitada.
‫OK.
‫Na verdade, não vamos apenas registrar esse
‫erro, vamos simplesmente fazer o erro para torná-lo um pouco mais visível,
‫e algo como uma explosão, talvez.
‫Sim, algo assim.
‫Ok, vamos salvar e ver o que acontece.
‫E bam, agora temos nosso erro aqui, na verdade.
‫Diz que não consegui encontrar esse
‫arquivo, então este log está vindo deste log
‫de captura aqui, mas ao mesmo tempo, ele gerará um erro.
‫E se gerar um erro, isso marcará
‫toda a promessa como rejeitada.
‫E é por isso que inserimos o registro de captura aqui.
‫O que irá então, é claro, acionar
‫este console. log deste erro.
‫OK?
‫E isso, claro, é uma nova camada de complexidade.
‫OK.
‫Mas ainda é muito importante entender como isso funciona, porque
‫isso acontece na vida real o tempo todo.
‫Portanto, precisamos retornar valores de funções Async o
‫tempo todo e, portanto, é importante
‫saber como realmente lidar com esses valores retornados.
‫Nesse caso, usando DEN e catch.
‫Agora, o problema com isso é que ele
‫mistura promessas com Async / Await.
‫Temos Async / Await aqui
‫e, de repente, estamos voltando a usar
‫DEN e pegando aqui.
‫Então, deixe-me mostrar outro padrão de como fazer isso.
‫Ok, então vamos entrar nesta parte aqui
‫não desta forma, mais assim.
‫E então vamos usar Async / Await para implementar essa lógica.
‫Agora, não queremos criar uma função de nome totalmente nova
‫para isso e, portanto, usaremos um padrão bem conhecido que
‫espero que você conheça, que é
‫um IIFE, portanto, uma expressão de função imediatamente invocada.
‫Ok, então entre parênteses, definimos nossa função.
‫Assim, e então ligamos imediatamente.
‫Lembre-se disso?
‫Então, neste caso, como queremos usar Async / Await,
‫também dizemos que é uma função Async.
‫Ok, isso parece um pouco estranho aqui, mas
‫se você pegou por exemplo meu curso de JavaScript, isso
‫parecerá familiar para você na verdade.
‫Ok, então novamente, você declara uma
‫função entre parênteses e a chama de função imediatamente.
‫E dessa forma, você não precisa declarar
‫uma função de nome inteira novamente para chamar em algum
‫momento mais tarde.
‫OK.
‫Agora, como estamos usando Async /
‫Await, estamos usando o padrão try it catch novamente, como antes.
‫Então pegue, tenha acesso ao erro aqui, e na
‫verdade não podemos omitir isso aqui.
‫Portanto, mesmo que não queiramos usar
‫esse erro, ainda temos que escrevê-lo aqui.
‫OK.
‫Em versões futuras de
‫JavaScript, isso terá desaparecido, mas por enquanto precisamos fazer assim.
‫Então é aqui que estará o erro.
‫E aqui em cima, teremos todos esses consoles. Histórico.
‫Este aqui,
‫e este aqui.
‫E agora espero que você saiba como realmente
‫obter o valor da função Async.
‫Então você sabe como fazer isso.
‫Na verdade, vou pausar o vídeo e permitir que
‫você descubra como fazer isso sozinho, certo?
‫Então aceite esse pequeno desafio e eu estarei de volta
‫em um segundo.
‫Você conseguiu colocar essa string aqui, então esses dois
‫prontos para a variável x exatamente como
‫tínhamos feito antes?
‫Então, apenas assim aqui?
‫Então, é exatamente como fizemos antes.
‫Você declara uma variável e então aguarda a promessa.
‫E a promessa, neste caso, é tirar a foto do cachorro.
‫OK?
‫Portanto, esta função aqui é uma função
‫Async e, portanto, retorna uma promessa.
‫E o valor do resultado dessa
‫promessa é este valor aqui,
‫que é retornado e, portanto, ao esperar por esse
‫valor, o resultado será esta string.
‫Então, nós armazenamos isso em x e então podemos
‫logar no console, é claro.
‫Então console. log x.
‫Então, caso haja um erro, ele irá detectá-lo e
‫registrá-lo no console aqui também.
‫Se salvarmos agora, bam,
‫obteremos o erro ainda porque o
‫tínhamos aqui, então essa parte ainda funciona.
‫Consertando, salvando e aqui vamos nós.
‫Portanto, agora está funcionando conforme o esperado.
‫Mas, novamente, com Async / Await é muito mais
‫limpo, parece muito melhor e também é mais fácil de entender.
‫E então não estamos misturando Async / Await em um lugar
‫aqui e então usando DEN e catch aqui como fizemos
‫antes com este pedaço de código.
‫OK?
‫Então, na vida real, esse tipo de coisa acontece o tempo todo.
‫Portanto, temos uma função Async e a
‫chamamos de outra função Async, e talvez até
‫tenhamos chamado outra função Async
‫dessa primeira função Async, então temos um
‫monte dessas funções Async interagindo umas com as outras.
‫E por isso é muito importante que você saiba
‫como tudo isso funciona.
‫E, novamente, para recapitular, a coisa
‫mais importante a lembrar é que uma função Async
‫retorna automaticamente uma promessa e que o valor que
‫retornamos de uma função Async será o valor de resultado
‫dessa promessa.
‫E então, a partir daí, podemos simplesmente lidar com isso
‫como mais uma promessa.
‫E isso é exatamente o que fizemos aqui, aguardando
‫a primeira promessa que criamos.
‫OK?
‫Então, por favor, tente entender isso e certifique-se
‫de que você realmente entende.
‫Porque ao longo do resto do curso
‫vou presumir que você sabe como trabalhar com essas coisas.
‫E é exatamente por isso que
‫criei esta seção, para tirá-la do caminho antes de realmente
‫começarmos a trabalhar sem JS e Express, e todas essas coisas boas.
‫OK?
‫Então, estamos quase terminando esta seção, há apenas uma pequena coisa
‫que quero mostrar a vocês
‫no próximo vídeo.