Um momento
Aula 01
Cursos / JavaScript: Async / Await
Gestão de Promessas no JavaScript com o Async Await

Summary

Resumo da Aula sobre Async e Await no JavaScript

Nesta aula, aprendemos sobre Async e Await, introduzidos no ECMAScript 2017, que simplificam o manuseio de promessas (promises) no JavaScript.

Revisão das Promessas

  1. Função FindOne: Exemplifiquei uma função que busca a conta de um usuário no banco de dados pelo ID.

    • Essa função retorna uma promessa.
  2. Uso de .then():

    • Para lidar com a promessa, usamos o método .then().
    • O que se espera é que, se a conta for encontrada, um objeto com os dados da conta é retornado; caso contrário, uma mensagem de "conta não encontrada" é exibida.
    FindOne(id)
      .then(conta => {
        console.log("Conta encontrada:", conta);
      })
      .catch(() => {
        console.log("Conta não encontrada");
      });
    

Introdução ao Async/Await

  1. Simplificação do Código: Com a introdução de async e await, a maneira de lidar com promessas fica mais limpa e fácil de entender.

  2. Uso de Await:

    • Para usar await, colocamos antes da chamada de uma função que retorna uma promessa.
    • await faz com que o código "espere" pela resolução da promessa antes de continuar.
    async function buscarConta(id) {
        const conta = await FindOne(id);
        console.log("Conta encontrada:", conta);
    }
    
  3. Diferença Principal:

    • O await espera o resultado antes de prosseguir para a próxima linha de código, enquanto o .then() não espera, permitindo que o código continue a execução.

Considerações Finais

  • O uso de async e await fornece uma maneira mais intuitiva e legível de lidar com operações assíncronas em JavaScript.
  • Na próxima aula, continuaremos explorando mais sobre o uso de async e await.

Até a próxima!

Video Transcript

Nesta aula nós vamos aprender sobre o Async e Oate, uma nova maneira de lidar com promessas no JavaScript. O Async e Oate foi introduzido com o AcmaScript 2017, padrão do AcmaScript 2017, aí já vai dar pra usar Async e Oate. Então pra começar vamos primeiro revisar como é que a gente lida com as promessas, a maneira usual, antes do Async e Oate. Vamos aqui no editor de texto pra gente escrever um código. Então vamos supor que você tenha essa função aqui, chamada FindOne, você tá trabalhando com um aplicativo, aí você tem que fazer o login do usuário. Vamos supor que no banco de dados tem uma tabela com as contas dos usuários. Então vamos encontrar a conta do usuário usando o ID dessa conta. Então essa função FindOne vai levar com argumento aqui o ID da conta. Vamos supor que o ID da conta é 1, 2, 3, 4. Então vamos supor que tenha essa função chamada FindOne que leva como argumento aqui, o parâmetro pra busca no banco de dados. Então vamos buscar pela conta de ID 1, 2, 3, 4. Agora a conta pode existir ou a conta pode não existir. Então a gente vai ver isso quando a gente lida com esse cara aqui. Vamos supor que a função retorna a promessa. Como é que a gente lida com a promessa? Como eu falo promessa é a promise. Então normalmente a gente fala o ponto Den, aí aqui o argumento vai ser uma função. Normalmente se é assim, você põe a variável aqui que vai conter o valor daquilo que foi encontrado pela sua busca. Nesse caso vai ser um objeto da conta do usuário. Ou se não encontrar vai ser no... Aí vamos botar uma função aqui de set ou flash pra definir o que a gente como lida com a promessa. A gente chama o FindOne, aí dá o dot Den, aí se tu desce a nossa busca aqui no banco de dados a função aqui retorna a promessa. A gente vai lida com o promessa ponto Den e o valor objeto conta aqui. Aí vamos supor, a gente não vai entrar em detalhes na implementação, quero só dar um console log assim por exemplo. Então se for o caso aqui não vai encontrar a conta vai ser no e a gente vai dar o console log conta não encontrada. Aí vai dar um return porque a gente não precisa mais fazer nada, não encontrou. Aí se a conta estiver existe esse cara aqui não vai ser executado, então essa parte não vai ser executada, vai pra essa parte aqui vamos dizer que conta foi encontrada. Aí vamos dar o console log da conta mesmo. Então é assim que a gente faz pra lidar com a promessa usando o dot Den. Mas agora tem esse negócio de a5 await, foi introduzido no Mac ManScript 2017 e como é que a gente vai fazer pra usar o a5 await? Então o a5 await vai fazer esse processo aqui de lidar com a promessa um pouco mais simplificado e não vai ter precisado adicionar esse bloco aqui de Den dessa maneira. Então vamos ver como esse cara fica quando você usar o a5 await. Então vamos escrever a mesma coisa aqui embaixo. Então a gente vai dar o find1 da mesma maneira, um argumento, um objeto com id 1, 2, 6, 4 da conta do usuário. Aí em vez de falar ponto Den a gente vai fazer o seguinte, a gente vai botar await antes da chamada da função. A gente sabe que o find1 retorna a promessa. Aí pra lidar com a promessa a gente vai usar o await antes da chamada. Aí você vai pôr a conta aqui no lado esquerdo. Por que? Porque o que o await faz é o seguinte, ele pega o valor que foi fornecido pela promessa aqui do find1 se tudo der certo, se der sucesso e pega o valor e põe dentro dessa variável aqui conta. Note se você não tiver o await dessa maneira aqui, esse cara retorna o promessa, então conta vai armazenar o quê? Armazenar uma promise. Mas a gente não quer a promise, a gente quer o valor fornecido pela promessa se tudo der certo. Então tem que ter o await pra poder desembrular aquela promessa. Aí você faz a mesma coisa que fez antes, é só botar aqui e um detalhe que o await vai fazer um negócio síncron, ele vai, quando você chega nessa linha aqui, ele vai chamar sua função e vai esperar até que a promessa seja realizada aqui. E depois que esse valor for retornado, fornecido, é que ele vai armazenar e depois disso vai continuar com os outros comandos. Então tem esse detalhe que o cara com o await, você tem que esperar por essa linha ser terminada, né? O processo aqui de fazer pedido pro banco de dados e receber os dados e mandar o valor fornecido pra variável, vai esperar tudo. Certo? É diferente do anterior, né? Se você fizer desse jeito aqui, ele não vai esperar pra poder executar os comandos posteriosos aqui que vem depois, certo? Essa maneira anterior, ele não vai esperar que o find1 termine pra poder continuar com os outros, as outras linhas, esse detalhe. Certo? Então, por esse vídeo é só e a gente vai continuar no próximo vídeo. Até mais.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: