3 Simplificando Código Assíncrono com Async Await - mod 09

[Música] fala Mestres beleza no vídeo de hoje nós vamos entender aqui o que que é o a aight né dentro aí desse mundo assíncrono e a gente vai ver aqui uns exemplos eu vou dar uns exemplos aqui de como que o ass vai nos ajudar a trabalhar com Promises tá porque basicamente o a88 é uma forma diferente da gente escrever os Promises a gente continua trabalhando com eles D mesma forma que a gente viu anteriormente ele na verdade Eles continuam funcionando né da mesma forma que a gente viu anteriormente mas na hora de usar de

de executar é um pouquinho diferente tá então vamos lá pra gente ver isso aqui melhor eu já criei aqui né o nosso arquivo da nossa aula simplificando o código assíncrono com a aight então a gente já vai iniciar declarando as funções usando as funções os usando async né porque o que que é na verdade né vou falar aqui antes o que que é o asn a Eu já falei que é uma forma mais simples da gente escrever e trabalhar com Promises então o o ayn né a a ideia de assíncrono Eh esses operadores né E

aate eles vão atuar em cima de funções então nós iremos criar funções assíncronas lembrando o mesmo conceito de assíncrono que a gente falou lá em promis que são coisas que irão executar em paralelo eh a gente vai declarar funções assíncronas onde Essas funções quando elas forem executadas Elas serão executadas em paralelo e dentro dessas funções a gente vai ter o ter o operador ait né que ele meio que vai substituir o ponto den aquele ponto den que a gente dá para poder pegar a resposta da promes a gente vai usar o aate então eu vou

escrever aqui pra gente ver essa essa sintaxe né e também os exemplos pra gente entender melhor o que que eu tô falando então já vou começar aqui declarando uma função assíncrona né usando o ay o usando function né ayc ó a gente digita aqui ayn function o nome da função que seria função assíncrona e isso é uma função assíncrona né a diferença da função síncrona a função normal é que nós temos aqui o a no início e também com errow function né eu teria né const função assíncrona 2 eu vou atribuir nessa variável a e

a gente declara né a errow function Normal também tá então a diferença Aqui nós temos agora a palavrinha e aqui antes da enquanto a gente tá criando a função né isso aqui também vai funcionar para funções anônimas eh para funções isso para funções quando a gente for de passar né uma função anônima para ou função callback né quando a gente envia uma função como parâmetro eu posso a única coisa que muda né que eu vou colocar o async no Antes aqui do function e também no caso da da er function né a gente manda isso

aqui né sem o const tá então é assim que nós declaramos funções assíncronas e agora a gente vai ver como que funciona esse dentro em conjunto com as funções assíncronas tá então eu vou fazer o seguinte eu vou deixar aqui um comentário né usando a com promes se a gente colocar o mouse aqui em cima das nossas funções Que Nós criamos as funções assíncronas a gente pode ver que a função na na notação dela diz que ela retorna um Promise deid no caso aqui essa outra função assíncrona um Promise deid se dentro da função eu

retornar um Hello Word a gente vai ver que a anotação ol o Promise de um string então é uma promessa de um string e Promise né Nós vimos na aula passada como que eles funcionam Então as funções assíncronas a gente vai conseguir trabalhar com elas o da mesma elas Retornam pro Prom né então quando a gente executa uma função assíncrona A Resposta dela sempre vai ser uma Promise E aí a gente começa a ter esse encadeamento de Promises de Promessas de dados e a gente começa a usar o await para ficar aguardando essas respostas Caso

seja e do nosso interesse então eu vou fazer aqui o seguinte ó eu vou criar aqui uma função e nesse exemplo aqui eu vou eu vou declarar uma função tá então aqui ela vai ser a função a S que vai ser o teste do promes né então teste promes e aqui dentro dessa função dentro da função eu vou criar uma Promise tá então vou criar const Promise eu vou ter um New Promise resolve reject e aqui dentro dessa Promise a gente vai fazer a mesma estrutura que nós vimos na aula anterior né onde eu eu

a gente faz um console log né log iniciando execução da Promise e logo aqui depois eu vou ter um set set time out onde eu vou resolver o meu Promise Depois de alguns segundos né Promise resolv vida e o set timeout eu vou deixar aqui uns 2 segundos tá pra gente pra gente conseguir ver isso aqui então o que que eu fiz declarei uma Promise dentro da minha função assíncrona e aí agora que eu fiz isso eu consigo usar o await aqui então como seria isso Ó eu vou pegar eu vou criar aqui a variável

resposta e vou atribuir nessa variável Promise né tá que seria a resposta da minha Promise só que aqui eu vou usar o await Tá eu vou aguardar esse meu Promise resolver que aí é onde eu vou ter a minha resposta então depois disso eu vou fazer aqui né o console log da resposta certo então com essa função criada eu tenho que executar ela né então aqui na linha de baixo eu simplesmente Vou chamar o teste teste Promise né e executa a função ela não precisa de nenhum parâmetro nem nada a gente só executa então quando

eu faço isso e a gente testar esse arquivo temos aí ó iniciando a execução do Promise Promise resolvida que foi esse consol log da nossa resposta né então eu vou fazer aqui outro consol log continuando execução da função E se a gente executar novamente a gente vai ver ó eu vou iniciar a execução da Promise e eu estou aguardando a minha Promise a ser resolvida né então a gente vê que o código fica parado espera a promise resolver para aí sim a gente continuar a execução da função então o que que tá acontecendo aqui nós

temos nós estamos criando uma função assíncrona só que dentro dela eu consigo ter um comportamento sícon onde eu aguardo outras Promises a serem resolvidas Então como que a gente pode dar um exemplo aqui daquele processamento em paralelo que nós vimos na aula passada eu posso fazer o seguinte esse timeout aqui ó que nós temos dentro da Promise eu vou receber ele como parâmetro tá então aqui eu vou ter um parâmetro que eu vou chamar aqui de timeout que eu vou passar direto aqui pro set timeout ó então quando eu chamar teste Promise eu vou passar

aqui ó 2000 vou chamar teste Promise de novo com 1000 e vou passar chamar teste Promise de novo com 5.000 então eu vou chamar a minha função três vezes é o test Promise Ou seja eu vou criar três Promises tudo em paralelo né só que dentro da função eu vou estar aguardando eh aguardando acontecer alguma coisa aguardando a promise ser resolvida né no caso nosso aqui é só um set timeout Mas vamos imaginar por exemplo a leitura de um arquivo então eu eu teria né a função de ler arquivo e dentro dela eu ia fazer

a leitura do arquivo e aguardar a resposta né aguardar os dados para aí sim eu fazer alguma coisa ou simplesmente retornar e do jeito que me interessasse Tá mas agora salvando isso aqui e executando nós temos aí ó iniciou a execução de três Promises e ele vai começar a fazer a promise resolvida né no caso resolveu as duas primeira mais rápido né que foi a de 1 segundo e a de dois e depois Resolveu a de 5 segundos e se a gente prestar atenção nos intervalos de tempo da mesma forma que nós fizemos na aula

passada a gente vai conseguir perceber que que realmente as coisas estão acontecendo em paralelo tá então com essa com agora com A8 Nós abrimos mais uma possibilidade né que vai ser trabalhar com coisas assim com com no caso ter as funções né que executam de forma assíncrona e dentro dessa função dessas funções a gente vai conseguir estar aguardando ou não a a promise ser resolvida E aí vai surgir a pergunta né de como que a gente faz para tratar o erro né porque lá no quando a gente fazia o ponto den no ponto den eu

eu tinha que eh eu tinha que dar poderia dar o ponto Cat né para poder capturar o erro e aqui não aqui a gente não eh não tem um ponto catch aqui mas aí para tratar esse erro a gente usa o try catch tá porque quando a promise ela é rejeitada se a gente tiver trabalhando né com tricat o o cat vai pegar essa rejeição de Promise né ele vai capturar esse erro e a gente vai conseguir tratar Beleza então vamos fazer isso aqui ó eu vou criar aqui uma outra função eu vou comentar aqui

as chamadas do test Promise e vamos criar aqui no caso vai ser o tratamento de erros na A então aqui eu vou ter uma função eu vou copiar aqui a estrutura dessa função test Promise eu vou chamar ela de test Promise er e nós teremos uma Promise aqui dentro só que ao invés de de resolver a gente vai rejeitar Então vou chamar aqui ó reject e vai ser Promise o valor né que eu vou retornar vai ser Promise rejeitada tá aqui tá a parte que eu aguardo pela solução da Promise e aqui Depois temos os

consol logs e aqui aqui que vai entrar o tricat né No momento que a gente Aguarda a resolução da Prom que aqui eu vou ter né o try eu vou tentar eh pegar a resposta da minha Promise e aqui eu vou ter o catch Cat de um erro né que aqui eu vou tratar esse erro eu posso por exemplo fazer o console log né console pon log dessa variável e E no caso da resposta eu tenho que mover Esse consol logo para dentro do bloco try ner que é aquela ideia dos dois caminhos Nós criamos

a possibilidade do caminho de sucesso que seria dentro do try Então se as coisas funcionar vai tá dentro do try e se der algum erro vai tá aqui dentro do cat Então se funcionar né Se eu conseguir pegar a resposta da promes eu vou fazer um console log se não funcionar eu vou fazer o console log do erro né então aqui até no no conso log eu vou printar string erro antes né dois pontos e a minha variável e pra gente ver isso aqui e agora eu vou executar né o teste Promise erro passando aqui

um segundo né do timeout E então se eu executo a gente vai iniciar a execução da Promise e ele printou ó error Promise rejeitada né onde esse Promise rejeitada foi a string aqui que eu passei na rejeição da Promise E com isso daí depois nós temos né continuando a execução da função que é a parte de fora aqui do do tricat então ele tentou Executar aguardou a execução viu que deu erro chamou o cat e continuou a execução da minha função Tá certo e E é assim que a gente vai estar fazendo esse tratamento de

erro sempre que a gente for trabalhar com a weight tá usando aí o Strike cats e agora por último aqui eu vou trazer aquele exemplo que nós fizemos na aula passada de como ap externa né onde Eu comunico com o github né com o servidor do github a gente vai ver esse exemplo aqui agora usando trat tá então vou criar aqui a função get vou fazer com a fun aqui tá get Hub giub user tá essa função aqui vai ser um uma função assíncrona e aqui dentro dela a gente vai chamar o fat né fat

com a URL deixa eu copiar o URL aqui e é isso tá então se a gente olhar o fat o que ele retorna é uma Promise né porque a gente viu que fat é uma uma função assíncrona né a gente ele funciona de forma assíncrona Então como ele é uma função de forma uma função assíncrona eu consigo aguardar né então consigo dar um await eu aguardo a execução do meu PR da da minha função assíncrona né que seria a função fet então o fet ele vai retornar uma Promise de uma response né esse response é

uma resposta http e eu posso atribuir isso em uma variável né então vou criar aqui a variável response né na variável respon eu vou response eu vou armazenar a resposta da minha função assíncrona após eu fazer o eu aguardar né A a resolução aí dessa função assíncrona e aí com essa resposta eu tenho que converter para Jason né Que olhando aqui na na aula passada esse exemplo aqui ó nós pegamos a resposta né um response no ponto den E aí eu retorno à conversão dessa resposta em um Jason né porque Jason essa função Jason para

converter ela é também assíncrona E aí depois eu faço o console log do dos dados ali do meu usuário do github Então a gente vai fazer isso aqui ó response se eu chamar aqui na linha de baixo ó response ponto Jason a a gente vai ver aqui botando o mouse em cima olha lá o Jason é um Promise retorna né depois os dois pontos aqui que é o que indica que o que vai ser retornado uma Promise de n e uma Promise de n no caso esse n aqui é a gente não sabe o que

que vai ser retornado mas é alguma coisa então como ele retorna O Promise como ele é asscon a gente consegue também aguardar então eu vou criar aqui a variável data vai receber o await né vou aguardar a resposta que no caso é a conversão de Jason da minha resposta e aí essa variável data já vai ser um dado que eu extraí né que no caso é o dado da resposta http que eu vou simplesmente fazer aqui ó um console P log data e aqui eu vou chamar né get github user então executando isso aqui a

gente vai ver que aqui ó nós temos aí todas as minhas informações do github tá então a comparação que nós temos né Eh entre esses dois arquivos no caso seria na forma de executar né com o fet nós temos aí vários pont den Se eu quisesse tratar erro eu teria né um ponto Cat e com assim que aate o código ele vai ficar mais legível né mais fácil de entender de interpretar o que que tá acontecendo porque a forma de escrever muda né e fica bem mais eh significativo a gente consegue entender mais o que

que faz né O que que cada passo tá executando e também no caso do ponto den a gente viu que sempre que eu retorno dentro de um ponto den Eu só consigo recuperar esse dado em outro ponto den né então isso fica é difícil da gente extrair o dado de dentro de um ponto den para executar para usar em outro lugar então no exemplo aqui se eu fosse criar uma função né que pega dados do usuário essa função que pega dados do usuário para ela funcionar bem eh eu teria que ter uma callback tá lembra

da ideia de callback que é a função que depois de a função que a gente envia como parâmetro depois de um tempo ela é executada eu eu teria uma função que seria executada quando eu pegasse o dado aqui no no quando o dado fosse quando a resposta chegasse né a resposta do dado aqui da da api do github por que que eu precisava dessa callback para conseguir tirar o dado de dentro aqui do ponto den e levar para fora né no caso seria por exemplo retornar de uma função porque aqui a minha função né o

get Git Hub user se eu quiser retornar esse data return data né e aqui no get kit Hub user eu vou ter aqui uma variável user e depois aqui eu vou fazer ó console. log user a gente consegue né tirar o dado de dentro da função assíncrona e levar para onde eu quiser né fazer em outra função e uma usar né em outra função e uma outra variável na verdade se eu executar isso aqui a gente vai ter um problema né que é a ideia do encadeamento das Promises porque o que que acontece Deixa eu

voltar aqui para explicar para vocês eh uma função assíncrona a gente viu que ela retorna um Promise então toda a função assíncrona pra gente pegar o dado que tem dentro dela que ela está retornando a gente precisa guardar Então nesse caso aqui ó que eu chamei get Hub user atribuindo a variável user eu não estou aguardando a resolução do Promise E aí para mim conseguir fazer isso Eu precisaria ter outra função assíncrona que iria ter que para mim conseguir aqui fazer o aight tá porque na maioria na maioria na maioria das vezes a gente não

vai conseguir usar o aight do lado de fora de uma função assíncrona existe hoje já algumas formas pra gente fazer isso mas é uma uma coisa um pouco mais avançada tá a gente não vai entrar nisso agora só que o que eu quero dizer é o seguinte eh funções assíncronas funcionam muito bem entre si eu tenho várias funções assíncronas onde uma chama a outra e Elas começam a guardar as respostas e o código começa a conversar eh de uma forma interessante isso quando a gente precisa aguardar né pegar o dado aí eh de volta se

a gente não precisar aguardar para recuperar esse dado a gente pode trabalhar e disparando as coisas em paralelo e sem usar o aight né se eu não uso o aight ele simples simplesmente dispara Promise em paralelo da forma que nós vimos aí e principalmente na aula anterior tá Então nesse exemplo aqui onde a gente chama get github user né e retorna um dado Eu poderia usar o ponto den aqui fora só que não faz muito sentido né porque a gente tá querendo nos livrar do ponto den E aí só que aí no caso eu teria

uma outra função tá que seria por exemplo a função eu vou criar aqui uma função assíncrona teste é uma função assíncrona e aí essa função assíncrona eu vou chamar né o get kit Hub user onde aqui eu faço um await E aí sim eu quando eu chamar teste né eu executo aqui teste se a gente faz isso aqui dessa forma onde eu já eu consigo né pegar os dados e aqui o que que acontece eu tenho duas funções assíncronas onde uma está chamando a outra e aguardando pela resposta tá então nos nos programas E aí

a maioria desses desses programas Principalmente quando eles trabalha com api eh que onde tudo é assíncrono né backend Nós temos uma função primária que executa todo o código e essa função primária ela é assíncrona Então a partir do início eu consigo ir usando os awaits e aguardando as respostas dos promis e vendo tudo funcionando melhor tá então aqui pra gente de exemplo a gente acaba ficando muitas pontas soltas porque a gente consegue enxergar como que funciona ou por que a gente faz Só que a a vantagem mesmo é na prática tá então quando a gente

for pros exemplos pros frameworks para ver as coisas funcionando vai fazer muito mais sentido eh e e a gente vai sentir de fato a facilidade de tá trabalhando com A8 ao invés com de usar o pon den ponod pcat lá do proms Tá certo então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]