2 Explorando Promises para Programação Assíncrona - mod 09

[Música] fala Mestres beleza na aula de hoje nós vamos iniciar aqui a exploração dos Promises no JavaScript e o uso deles na programação assíncrona tá porque na aula passada nós vimos lá o uso do The callbacks vimos também o set timeout só que a gente não viu como que a gente transforma uma parte do nosso código em a assíncrono para que a gente consiga né fazer meio que a execução assíncrona que é aquela ideia de executar aquele código e enquanto ele executa a gente fazer outra coisa E para isso né para que isso aconteça e

para que isso funciona nós temos os Promises e nessa aula aqui a gente vai ver de fato Como criar uma Promise né Qual que é a sintaxe aqui e como que elas funcionam tá então eu preparei aqui alguns exemplos na verdade bastantes exemplos para para esse trabalho né como que a gente pode trabalhar com a promise né e a promise a tradução né a gente pod eh a gente traduz isso aí paraa promessa e é uma promessa de resposta né de retorno do dado assim que ele estiver ou não eh Pronto né ou ou quando

o a gente fala quando a promise se resolve né Eh e o que que acontece eu vou deixar anotado aqui ó vamos criar aqui um bloco eh para dizer que as promis são promessas né de dados e que as Promise elas possuem elas possuem três estados né três estados E aí esses estados eles são o estado de pendente então pending né tem o estado fulfilled fulfilled seria o estado dela resolvida ela preenchida e temos também o estado dela rejeitada tá então a promise ela pode estar pendente rejeitada ou eh completa né preenchida E aí esses

esses estados a gente vai ver isso aqui como que isso funciona e como que a gente pode tratar né então quando ela tá fulfilled que ela está preenchida quer dizer que que os dados foram eh que a a promessa de dados né foi cumprida com sucesso se ela foi rejeitada que não deu certo né a aquela Promessa de dados e pending é quando ela está pendente ela está executando né ela está fazendo ali o processamento que a gente definiu para essa Promise então eu vou criar aqui uma variável né pra gente ver aqui a sintaxe

a sintaxe da Promise né que eu vou criar aqui a variável Promise mesmo e para criar uma Promise eh nós iremos usar Aqui nós temos o objeto né Global aí Promise do JavaScript e nós vamos criar uma Instância nova desse objeto usando New né Eh a gente não falou ainda do New das classes né A gente vai ver isso provavelmente no Próximo módulo então não vou explicar muito dessa notação de New aqui Mas a gente pode a a ideia que nós temos né é que a gente tá criando um novo uma nova Promise né por

isso o new Promise e essa nova Promise os par o ela recebe né um parâmetro até aqui na na notação né na tipagem dela aqui é uma função que a promise Recebe como argumento né que essa função ela ela tem dois parâmetros tá que é um um resolve e um reject e essa função retorna void ou seja como seria isso aqui anotação disso aqui seria isso ó com resolve e um reject então isso aqui vai na nossa ideia de callbacks tá eu estou enviando uma função para Promise e a promise vai passar para essa minha

função Quando ela for executada esses argumentos né resolve e reject onde resolve e reject são funções tá e a gente vai ver isso aqui em funcionamento e a gente vai conseguir entender melhor tá então quando eu expliquei de callbacks por exemplo lá em arris né a gente viu que as funções callbacks lá elas recebem parâmetros que são por exemplo o item do Array que a gente tá fazendo a interação o índice do item e que a ideia é a mesma só que o que muda é que ao invés de receber um item ou um índice

eu estou recebendo duas funções que eu vou executar Aí dependendo do que acontecer dentro da minha Promise então eu posso ter uma variável aqui ó resultado que é um boleano eu vou deixar como true e aqui eu vou verificar se resultado por igual a true né E aqui até já na na simplificando a escrita né essa comparação eu não preciso fazer se é igual a true ou se é igual a falso porque resultado já é um boleano né então eu só verifico resultado resultado é true se for ele vai executar aqui essa parte do IF

senão ela vai executar essa outra parte tá então se resultado for true eu vou chamar a minha função resolve e essa função resolve ela vai receber um como argumento aqui e algum valor tá E esse valor vai ser o dado que eu estou prometendo Então vamos imaginar que eu estou prometendo uma string aqui no caso eu vou mandar string ó sucesso e se não tiver resultado eu vou rejeitar a promise então eu vou chamar aqui ó reject falha e esse parâmetro né da minha função da função do resolver ou do reject pode ser um string

um objeto um número uma ar Rei pode ser todas todos os tipos de dados que nós temos aí no JavaScript então com isso aqui eu finalizo a declaração da Promise né então eu criei uma nova Promise uma promessa de dados e essa promessa de dados eu posso executar ela e como que a gente executa né a promise nesse caso aqui e eu só declarei tá então declarei a promise se atribuir na variável E agora se eu digitar a variável Promise né que foi a variável que eu criei esse nome ficou ruim né Vamos chamar isso

aqui ó é não na verdade é ficou ruim vou chamar isso aqui de promessa para ficar diferente é a criatividade do Dev Então vamos lá promet e aqui se eu digitar Um ponto nós temos três métodos o den catch e o finally e o den den é novo pra gente né Cat e finally a gente já viu no try Cat né tem o try Cat e lá tem o finally também a ideia aqui é parecida tá esse dem seria o caso de sucesso ou seja eu vou chamar a minha promessa e aí quando ela for

resolvida que vai ser o caso den eu vou executar essa função que eu estou enviando como callback tá deixa eu dar um enter aqui ó e aí nós temos o ponto Cat ponto Cat A ideia é parecida que tá aqui nós temos o ponto Cat que também no caso se a nossa Promise for rejeitada ele vai executar o cat ou seja se der sucesso ele vai executar o den se der errado ele executa o catch e nós temos aí também o final né que é eh Independente se deu sucesso ou erro ele vai executar o

final Então são todas funções né funções callbacks que nós estamos definindo né para cada caso desse pro den pro Cat e pro final e Essas funções elas podem receber algumas coisas que eu vou defir eu vou definir na minha Promise então o que que na Promise quando ela é resolvida quando nós temos aí o ffet né quando ela é resolvida eu estou mandando a string sucesso que seria o valor que eu estou prometendo né então aqui no ponto den eu posso falar eu posso eu vou falar né que eu recebo um um parâmetro aqui né

que é o value e o que que é esse value é o valor que eu estou passando como solução da Promise né o dado que eu prometi vai ser esse value então aqui dentro eu posso fazer ó console pon log do meu valor se der erro se cair no CAT o que que eu estou enviando falha né string falha então aqui no catch eu vou ter né o erro né ou seria a mensagem de erro error message alguma coisa do tipo e aqui dentro pra gente dar uma olhada eu vou fazer né o console. log

error message e no final o final ele não vai receber esse esses parâmetros Ele simplesmente vai executar uma função então aqui eu vou fazer um console P log execução do final certo então agora se eu salvo isso aqui e executo nós temos aqui ó ele logou sucesso logou também execução do final né que foi o que nós definimos e se eu vier aqui dentro na minha Promise e trocar o valor dessa variável resultado para false a gente vai ver o caso de rejeição né que é onde a promes foi E se eu executar eu tenho

aqui ó eu selecionei n eu não posso selecionar e dar play tirar aqui a seleção executar e temos aí ó o log de falha da string fha né e teve aqui execução do Fin que ele executa independentemente então por exemplo no reject eu posso rejeitar com New er erro na Promise alguma coisa do tipo se eu executo o erro aqui que eu estou fazendo cons log né vai ser o objeto error e aqui eu vou ter a mensagem e o nosso stack TR né stack TR que nós vimos aí na aula passada então a promise

essa promessa né a gente consegue personalizar ela do nosso jeito implementar a forma que a gente precisa que a gente quer né E nós temos que ficar chamando e o cat ou o final né para ir tratando essas coisas então esse exemplo Inicial né esse contato Inicial com a sintaxe é isso tá tem tem só um detalhe aqui que eu quero abordar nessa aula também que é em relação ao ponto den porque o que que acontece no ponto den eu posso retornar valores Então se aqui no ponto den eu retornar o um número 1 2

3 esse valor que eu retornei dentro do ponto den ele vai ser eu vou conseguir acessar esse novo valor dentro de outro ponto den que eu registrar e vai ser o número eu vou fazer um consol log do número então isso aqui confunde muita gente e por isso que eu estou que eu quero explicar isso aqui para vocês porque esse retorno do ponto den se por exemplo eu eu chamar essa minha Promise dentro de uma função quando eu faço o return dentro do ponto den não significa que eu vou retornar a função que tá fora

né que chamou essa minha Promise e isso confunde muito Dev né Tem muito Dev que tenta retornar de dentro do ponto den e não consegue E é isso que eu tô querendo deixar claro aqui eu vou salvar e executar isso aqui de novo e a gente vai ver o seguinte tá dando erro né Deixa eu voltar aqui o resultado para true pra gente executar e executando Aqui nós temos sucesso que ele printou que é o valor do do do resultado né quando a PR resolveu nesse primeiro ponto den que foi esse consol log aqui e

aí eu retornei 1 2 3 chamei ponto den de novo e dei outro consol log e ele logou aqui ó 1 2 3 também que foi o valor que eu retornei Então sempre que eu retornar de dentro de um ponto den Eu vou acessar aquele valor que eu retornei dentro do próximo ponto den que eu der então eu posso ficar encadeando chamando ponto den várias vezes e em alguns casos isso vai fazer algum sentido em outros não mas a gente tem que ter isso claro em mente tá porque sempre que a gente tiver trabalhando com

Promise e com ponto dentro a gente tem que tomar cuidado com esses retornos Beleza então dito isso Nós criamos a nossa primeira Promise eu vou deixar ela comentada aqui e agora a gente já vai comear a a ver de fato o comportamento da nossa da nossa das nossas funções assíncronas o assincronismo no geral a gente vai ver isso aqui funcionando agora tá Porque até então a gente criou só uma Promise né só um um uma é a gente só criou uma promess e só executou ela da forma mais simples né a gente viu aqui o

ponto Den O encadeamento né das Promises que é esse esses diferentes ponto den né então vou até deixar comentado aqui ó criando uma Promise simples criando não né executando e aqui embaixo eu vou deixar comentado eh o encadeamento da proms né seria esse caso com vários pont den que nós vimos o o caso aqui do 1 2 3 Então nesse exemplo aqui de cima eu vou tirar esse retorno de 1 2 3 e esse outro ponto D também a gente vai tirar vai deixar só um pon den pcat PF que é a promise simples aqui

a promise emade em cadeada eh e aqui embaixo a gente vai fazer ã mais exemplos tá então o que que eu vou fazer eu tenho aqui já num num código de consulta um algumas Promises o código onde eu crio algumas Promises eu vou eu vou criar elas aqui junto com vocês pra gente ter essa noção eh de como que a como que a gente vai pens Como que é o pensamento quando a gente tá criando a promise então aqui vai ser os exemplos exemplos de execução em paralelo certo então aqui dentro eu vou criar uma

outra Promise vou chamar de promise 2 Isso aqui vai ser ne New Promise a sintaxe aqui é a mesma sempre né então vou ter resolve reject Isso aqui vai ser uma função tá então dentro dessa Promise o que que eu vou fazer logo de cara eu vou fazer um console log executando promise 2 pra gente pra gente acompanhando nos cons no console né O que que tá acontecendo Então vou fazer aqui ó conso log executando promise 2 e dentro da minha Promise o que que eu vou fazer dentro da minha Promise eu vou chamar um

set timeout set time out nós vimos na aula passada né e eu vou passar aqui para ela sei lá 3 segundos então depois de 3 segundos eu vou dentro da minha Promise eu estou setando set time out depois de 3 segundos ele vai executar essa função essa função callback né do meu timeout e dentro dessa função callback eu vou resolver Olha só resolve a minha Prom tá que vai ser aqui o sucesso na promise 2 certo então o que que tá acontecendo dentro da Promise Eu estou fazendo uma outra estou executando né uma outra coisa

assíncrona que seria né o set time out e depois que o meu set timeout der o tempo né de 3 segundos que ele fori executar ah a função que eu defini eu vou resolver a minha Promise então em teoria a promise que eu estou criando ela vai demorar 3 segundos para resolver que é o tempo que o set timeout vai chamar a minha função resolve certo e aí eu vou criar mais dessas promis eu vou criar eu criei a promise 2 eu vou criar aqui vou agora eu vou copiar e colar pra gente não perder

muito tempo vou criar aqui a promise 3 ó sucesso na executando Promise 3 e sucesso essa Promise 3 ela vai demorar um segundo no set timeout né então ela vai demorar um segundo para resolver e eu vou criar Promise 4 essa Promise 4 ela vai demorar 2 segundos Beleza então criei as três Promises e agora eu vou executar elas e na execução é a sintaxe igual nós vimos aqui em cima tá então como nesse caso aqui é um exemplo simples isso aqui não vai dar erro a gente não vai lançar sação nem nada eu só

vou chamar ó Promise 2D que seria né quando ela resolver com o resultado então eu vou pegar aqui o resultado Qual que é o resultado vai ser as Strings né sucesso na Prom 3 sucesso na promise 2 e sucesso na Promise 4 então eu vou pegar esse resultado aqui na minha callback e vou simplesmente fazer um console log do resultado e eu vou fazer isso para pras outras Promises né pra Promise 3 e pra Promise 4 então o que que tá acontecendo Olha só eu estou criando três Promises três Promessas de dados e eu estou

executando essas três promesses e a ordem disso aqui vai ser a ordem que esse arquivo JavaScript vai ser executado vai ser de forma síncrona né então ele vai iniciar ele vai criar essa aqui ele vai passar por aqui vai criar essa nova Promise cria essa cria essa Promise E aí logo após ele inicia a execução da primeira Promise que seria a promise 2 né depois ele inicia a execução da Promise 3 e depois ele inicia a execução da Promise 4 logo aqui depois eu vou chamar console log o programa chegou no final certo então eu

vou iniciar a execução dessas Promises chego no final do meu programa E aí as três Promises elas estarão executando em paralelo Porque como a gente viu elas elas o código né ele não vai ficar aguardando a uma a promise 2 resolver para ir pra Promise 3 né ele vai disparar as três promessas em paralelo ou seja vai ficar as três executando uma ao lado da outra ali né E aí de acordo elas forem respondendo resolvendo o nosso código ele vai executando né o código que seria os pont den aqui para cada Promise tá então A

ideia é essa e nós vamos ver isso aqui funcionando agora Tá só vou dar play aqui e olha só olha os logs que deu aqui né vamos vamos entender o que que aconteceu aqui então ele fez o log aqui para mim executando promise 2 executando Promise 3 executando Promise 4 que esses logs estão aonde estão aqui né na criação da Promise Então essas Promises elas foram criadas tá e aqui são momentos diferentes tá quando eu crio a promise ela na verdade quando a gente quando a gente declara dá um New Promise aqui a gente já

inicia a execução da da Promise e quando eu registro o ponto Dena eu basicamente estô falando Ah quando essa Promise tiver resolvida ou se ela já tiver resolvida pega esse resultado e passa né pra função callback aqui pra gente executar essa função tá então se a gente comentasse esses pontos dens aqui eles a gente veria que esses logs né executando promes 2 3 e 4 eles continuariam eh aparecendo aí na na nossa na nossa sequência de logs Tá mas enfim ele vai executar isso tudo vai declarar as Promises já começa né executando a promise 2

3 e 4 e aí sim e o programa ele chegou no final e aí de acordo cada Promise foi terminando né que seria depois do do time out aqui elas foi faz ela foi fazendo os logs então primeiro a que resolveu o primeiro foi a promise 3 que é o que nós definimos aqui como o o tempo né de 1 segundo então depois de 1 segundo a promise 3 resolveu E aí depois veio a promise 4 né que é a que demora 2 segundos ou seja passou um segundo nos dois timers aqui e eu vou

eu vou dar esse exemplo depois tá pra gente ver que provar que realmente tá em paralelo mas o fato é que a ordem foi que resolveu a promise 3 a promise 4 e depois a Prom 2 que é a que demora mais tempo que demora 2 segundos tá vamos executar isso aqui de novo pra gente prestar atenção nos intervalos que vai ter desse log aqui ó vamos lá 3 4 e a 2 é tudo muito rápido né porque os intervalos aqui tá tudo de 1 segundo mas o que que eu vou fazer eu vou falar

que a promise 3 ela demora 5 segundos certo a Prom 4 ela demora 10 segundos e a promise 2 ela demora Vamos colocar 5 segundos também tá então o que que vai acontecer quando eu executar isso aqui essas duas Promises elas vão terminar praticamente instantaneamente no no mesmo tempo né vão terminar juntas porque as duas demoram 5 segundos vai ter uma diferença aí de nanosegundos de uma para a outra que a gente não vai considerar E aí depois de 5 segundos que essa terceira aqui vai terminar mas por que depois de cinco né porque tá

tudo em paralelo quando passa os 5 segundos para resolver a promes 2 e a promise 3 aqui na Promise 4 também já passou 5 segundos Então o que vai restar aí né é só mais 5 segundos e não 10 então quando eu Executar a gente vai ver que vai passar C segundos a gente vai ter Duas respostas que aqui ó dois e três e agora vai passar mais 5 segundos e a gente vai ter aí o o quarto o quarto o quarto log né que o que prova pra gente que as Promises elas estão realmente

sendo executadas paralelamente tá o que o que pode facilitar a gente enxergar isso aqui é o colocar que a promise 4 vai resolver em 6 segundos em 6 segundos então quando eu executar ele vai demorar 5 segundos para fazer os dois primeiros logs né da promise 2 e TR e só depois de 1 segundo Olha lá já terminou a promise 4 Então realmente tá tudo em paralelo e e o nosso programa né O melhor é que o nosso programa ele não está ficando parado ele bota essas promesses para executar elas vão ficar vão executar no

seu tempo cada uma né e de acordo elas vão terminando a gente vai tendo a resposta aí do nosso para cada uma né e agora no finalzinho aqui eu quero mostrar para vocês um exemplo de comunicação externa tá que vai ser um caso onde esse script já esse script que eu estou criando aqui ele vai fazer uma comunicação com outro servidor usando as Promises tá como que a gente pode fazer isso então eu vou ter aqui ó eu vou comentar aqui né realizando a comunicação realizando a busca né de dados na api do github eu

não sei se vocês já sabem o que que é github ou não o que que é api ou não eh mas github seria aí um um site extremamente famoso entre programador né uma plataforma pra gente fazer o versionamento de código e a api seria o servidor do github que está executando em outro lugar que não é na minha máquina né tá sendo executado em alguma Cloud aí algum servidor gigantesco que eu também não faço noção de onde é mas o fato é que não é na minha máquina é um servidor externo e eu vou realizar

a comunicação E para realizar a comunicação nós temos o a vari nós temos a função fet do JavaScript tá isso aqui já é do do node já é do browser que é basicamente uma função pra gente fazer requisições para outros servidores Então qual é o RL do Servidor que eu quero fazer a requisição né eu não vou explicar muito a fundo aqui o que que é as gírias do do backend Porque a gente já tem um curso aqui né de de backend a trilha de backend na Mestres e vocês vão entender mais sobre isso lá

mas o que eu tô fazendo aqui é a busca de dados em um RL qual RL é esse é o RL do servidor do github né então https dois pontos barra barra e Aqui nós temos api.github.com e aqui eu vou querer buscar os usuários né então barra users barra o nome do meu usuário né que eu é o nome do usuário que eu quero buscar que no caso é o meu usuário então o fet ele vai criar a promess pra gente que é a promise que faz a comunicação e externa que faz a comunicação com

outro servidor E aí o fet a gente pode ver que ele retorna uma Promise tá então ele na verdade ele gera essa Promise e aqui ele é um Promise né então o fet eu vou executar ele né com URL e aqui eu já posso colocar o pon den eu vou receber uma resposta de comunica uma resposta de de comunicação né entre uma resposta http que é esse response Então dentro desse response o que que eu vou fazer eu vou retornar o responsejson que que é isso eu pego a resposta http a resposta da comunicação externa

que vai ser um um monte de de de código enfim da forma que foi estabelecida a comunicação né no caso pode pode ser formato binário pode ser enfim um formato que vai vir do Servidor eu pego ess essa resposta e converto em Jason então é esse ponto Jason aqui que basicamente vou converter o o objeto que foi a string né que eu recebi po a link que foi recebido do servidor do github eu vou converter para Jason e aí com esse Jason como eu estou retornando aqui do ponto dentro que foi o que nós vimos

aqui do encadeamento de Promises né eu vou retornar esse Jason né de resposta e aqui na no no próximo ponto D eu vou fazer eu vou receber os dados né E que vai ser aí os dados do do usuário de fato que veio do github então vou fazer aqui ó console. log data que são os dados aí que eu quero ver eu vou comentar esses outros promis que a gente criou aqui pra gente não se atrapalhar nos logs esse cara também eu vou comentar e em Teoria com isso aqui eu já posso executar Olha só

vamos executar aqui o código e eu tenho ó ele chamou executando promis né que foi foi o o que eu falei anteriormente né que a promise quando a gente cria a promise ela já inicia a execução Então vou comentar isso aqui também só para não o tanto faz né vamos olhar já aqui o log do da comunicação externa né onde eu peguei normalmente eu peguei a resposta transformei em Jason e tô fazendo aqui o consol log de data que é esse objeto inteiro aqui que veio da api do github que foi Trago aqui pro nosso

pro nosso projeto e isso aqui foi feito também de forma assíncrona tá então eu vou voltar aqui com os pontos denos ó e o programa chegou no final também vamos trazer isso aqui tudo de volta eh eu vou colocar o fet antes do console log aqui ó do programa chegou ao final e mover esse comentário para cá também e vamos Executar tudo tá pra gente ver as a ordem das coisas Então olha lá ó e foi bem rápido o no log aqui eu vou pegar o o login então data data é o objeto inteiro né

pon login que vai ser só o nome do usuário meu do github executando novamente vamos voltar aqui pro final agora sim eu vou executar e olha lá ó e executando 2 3 4 logou o programa chegou no final E aí logo após ele já logou né Janira que é o nome do meu usuário do github que foi bem rápido né porque a api em si ela é rápida a a api deles não demora tanto para responder E aí depois veio as outras respostas das outras requisições tá então o fet ele é É também um Promise

vai funcionar também executando em paralelo e a gente pode ir mesclando tudo isso e enfim a gente vai ver muito disso quando a gente tiver desenvolvendo o nossos os nossos projetos tá então para essa aula aqui vai ser isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode est deixando um comentário aí logo abaixo e é isso aí muito obrigado e até a próxima [Música]