Summary

Resumo da Aula sobre Implementação de Promessas em JavaScript

Introdução

A aula se concentrou em ensinar sobre a criação de uma função chamada find1, que simula a busca de um objeto de usuário em JavaScript.

Implementação do `find1`

Definição da Função:
- function find1(query) { ... }
- A função retorna uma promessa resolvida (Promise.resolve) com um objeto de usuário contendo um id de 1234.

function find1(query) {
    return Promise.resolve({ id: 1234 });
}

Testando a Função

Testado no console do navegador. Ao chamar find1(), obteve-se uma promessa com o valor esperado.
Utilizou-se .then() para manipular o valor retornado pela promessa e logou-se o objeto no console.

Uso de `async` e `await`

Para utilizar await, é necessário estar dentro de uma função async.
Uma nova função chamada login foi criada para demonstrar o uso de await.

async function login() {
    const conta = await find1();
    console.log(conta);
}

Atraso na Resolução da Promessa

A função find1 foi modificada para incluir um atraso de 5 segundos usando setTimeout, simulando uma operação assíncrona real.

function find1(query) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ id: 1234 });
        }, 5000);
    });
}

Verificação do Comportamento do `await`

Ao executar a função login após a redefinição de find1, confirmou-se que o await pausa a execução do código até que a promessa seja resolvida.

Conclusão

A aula mostrou como implementar e testar promessas em JavaScript, bem como a importância de usar async e await para gerenciamento de código assíncrono.
O uso de um atraso na função find1 forneceu uma compreensão prática de como o await funciona em relação ao fluxo de execução em um ambiente assíncrono.

Próximos Passos

Continuar explorando mais sobre promessas e manipulação de dados assíncronos em JavaScript nas próximas aulas.

Video Transcript

Vamos continuar a aprender o i5o8. Então vamos definir o find1. Vamos fazer nossa própria implementação aqui. Não vai ser a implementação real, mas vai ser só um fad de conta aqui para a gente poder testar. Deixa eu abrir uma nova tab aqui. JavaScript. Então vamos definir o find1. Function. Find1. Aí tem um argumento para o que vai ser o objeto da query. Vamos chamar de query. Aí... Então... O find1 vai retornar a promessa, não é? Então vamos só retornar uma nova promessa aqui. Vamos retornar a promessa já resolvida com um objeto da conta do usuário. Então a gente vai fazer o seguinte, vai só pôr aqui promise.resolve e um objeto do usuário, vamos botar o id 1234. E pode ter outros campos que eu não vou digitar, certo? Nome, email, essas coisas. A gente quer focar aqui no i5o8 e promessas, então eu não vou adicionar mais coisas. Então a implementação é bem simples, só de leve aqui, não é a real, é só para a gente poder testar aqui os nossos exemplos. Então find1, leve o query lá, que nem precisa ter ou não nesse caso, mas só para a gente retornar a promise que já vai ser resolvida automaticamente aqui porque a gente vai dar o promise resolve com o objeto, certo? Então a promessa é retornada do find1. Aí com isso, o que a gente vai fazer? Vamos pegar isso agora aqui e vamos testar lá no console do navegador. Eu vou abrir o Firefox, você pode usar qualquer navegador que você popular que você tiver aí e abrir o console, certo? Então já tenho aqui o Firefox aberto com o console, então vou colar a definição do método, do função find1, tá certo? Vamos só testar esse cara, vamos chamar o find1, nem precisa dar nenhum argumento porque é uma função de implementação falsa, certo? Então vou dar o find1, o que é que você vai, o que é que vai acontecer quando a gente está aqui, find1 e apertar o enter? Se note que a gente obtemos uma promessa com o valor retornado, né? A gente já esperava isso porque a gente deu um return promise já lá mas quando a gente está fazendo essas coisas a gente não quer saber da promessa, a gente quer saber daquele valor que é fornecido pela promessa, né? Fullfilled, o valor que foi fullfilled realizado aqui da promessa. Então para isso a gente normalmente dava aquele den, como a gente vai falando no vídeo anterior, deixa eu só dar um console log aqui, den conta e dar um console log, conta para você ver o que é, não é? Então depois de den para lidar com o promessa, o valor fornecido pela promessa vai para variável conta e a gente deu o console log aqui, já recebeu o objeto com o id1234, como a gente esperava porque a gente já tinha posto aqui. Agora, como é que a gente vai fazer usando await? Então a gente faz o seguinte, olha aqui, await, find1, né? Aí, dessa maneira aqui. Agora vai ter um detalhe aí, olha o que aconteceu. await is only valid in async function. Yeah, async generator. Então está dizendo que você só pode usar o await dentro de uma função async, função async ou os geradores async. Então o que significa isso? Significa o seguinte, para poder sempre usar o await, esse comando aqui tem que estar dentro de uma função async. Para você definir a função async, é só fazer uma função assim, olha, função normalmente, aí você põe o async antes da palavra chave função, function, certo? Só isso, só adicionar o async. Mesma coisa para a função de flash, você vai async dessa maneira aqui, certo? Antes dos parênteses. Certo? Então vamos criar uma função aqui, chamada login. Então vou fazer uma função aqui, certo? Vamos chamar essa função de login para logar. Como a gente vai ter que usar o await, a gente vai ter que põe async. Então você define assim, aí dentro dessa função, vamos usar aquele await find1 que a gente já tinha executado anteriormente. Então agora vai funcionar porque esse cara aqui está dentro de uma função async, certo? Agora, se eu botar o await find1, o cara vai realizar, vai pegar o valor da promessa aqui, mas não vai fazer nada. Então eu vou dar o console logo para você ver, né? Console log await find1, vamos ver aí. Então, a PTA entra, aconteceu nada porque isso aqui só é a definição da função. A gente precisa executar a função fazendo login com os parênteses, certo? Então quando eu executei o login, vai chamar aqui dentro, primeiro find1, o find1 vai lá em cima, torna a promessa que resolve com o objeto. Aí pega aquele cara, espera, retornar, aí pega aquele valor e dá o console logo do objeto aqui, certo? Está aqui. Está certo? Então é isso. Sempre lembre que se você quiser usar o await, tem que pôr o async ali. E como a gente já disse antes, para a gente poder testar se realmente o await espera para essa linha executar em vez de executar os outros, vamos fazer o seguinte aqui. Vamos redefinir o find1 aqui, essa função e dar um set time out para poder adicionar um delay. Então eu vou redefinir o find1 aqui, vou dar um return, deixa eu dar o set time out aqui. Deixa eu ver, vamos ver esse cara. Estou na nova promessa, vamos escrever lá no editor de texto, voltar aqui. Então vou escrever outra implementação do find1, desta vez vamos adicionar um delay para esperar um pouquinho antes de resolver a promessa. Function find1, eu nem me precisava por o argumento aqui, que eu não estou usando o mesmo. Return, nova promessa, new promise, primeiro argumento resolve, reject, eu não vou usar reject, mas deixa aí mesmo. Então eu vou dar o set time out, se lembra dessa função aqui para poder esperar antes de executar uma função. Então eu vou esperar quanto tempo aqui? Vamos esperar uns 5 segundos. Então aqui é 5 mil milis segundos, que significa 5 segundos. Aí depois de 5 segundos essa função vai ser executada. O que é que eu quero executar dessa função? Eu quero dar o resolve, vou resolver a promessa com um objeto aqui. Então vou te explicar o que vai acontecer quando a gente chamar o find1. Ele vai chamar aqui, vai tornar uma nova promessa. Essa promessa aqui, você vai dar o set time out, depois de 5 segundos, é que a promessa vai ser resolvida com um objeto aqui, certo? Então eu adicionar aquele delay para a gente ver se realmente ele espera, o await espera o comando ser executado antes de executar as próximas linhas. Deixa eu ver aqui no... Deixa eu abrir o outro... Botando aqui para o console do navegador, vou redefinir o find1, colei aqui, certo? Find1, deixa eu só testar dessa maneira aqui. Eu executei o find1, dá uns 5 segundos aí. 2, 3, 4, 5, HD, vou abrir aqui. Ainda está pene, acho que não atualiza aqui mesmo. Então vamos ver aqui no updend, conta, solar, conta, vamos ver aqui. 1, 2, 3, 4, 5... Está aí, veio aqui depois de 5 segundos. Então está tudo funcionando direitinho. Agora vamos lá voltar ao nosso exemplo do login aqui. Eu quero testar esse login aqui. Vou copiar e colar de novo. Está dentro da função async. Ele dá o await, o find1. Vamos botar esse cara aqui dentro de uma variável chamada conta. Então você vai dar o find1, nem preço de argumento aqui, mas só para você fazer mais sentido. Então vai dar o find1, retorna o promessa depois de 5 segundos. Aí esse valor que foi retornado aqui, fornecido, realizado pela promessa, vai para a variável conta. Aí depois de 5 segundos, ele vai dar o console log. Deixa até a adicional terminou aqui. Então você vai ver se o async realmente espera esse comando executar, ele não vai executar o console log aqui de baixo. A gente espera que isso aconteça. Então eu defini a função async, vamos chamar a função. 1, 2, 3, 4, 5... Nenem deu o console log só depois de 5 segundos que deu o console log da conta e finalmente terminou. Isso confirma que o almeite realmente espera o comando executar antes de continuar os próximos comandos, próximos linhas do código. Então por essa aula é só e até a próxima.

Comentários

Nenhum comentário ainda (loading...)

From YouTube

Nenhum comentário ainda (loading...)

Gostou da aula? 😆👍

Apoie nosso trabalho com uma doação:

Quero contribuir