Como dominar o JavaScript assíncrono: chamadas de volta, promessas e assíncrono/aguardado

1. Introdução ao curso: Bem-vindo ao Mastering Asynchronous JavaScript com a ajuda de callbacks, promessas e palavras-chave de promessas Meu nome é Wessel e serei seu instrutor durante todo o curso Estou empolgado em guiá-lo por um dos conceitos mais importantes no mundo do desenvolvimento de JavaScript, que é lidar com operações assíncronas Um pouco complicado no início, mas é uma etapa essencial na criação de aplicativos web eficientes e sem bloqueio Neste curso em particular, divido tópicos complexos em pequenos e fáceis de entender aplicativos pequenos e fáceis de entender . Se você estiver lidando com APIs, esse conhecimento permitirá que você trabalhe com várias tarefas ao mesmo tempo sem diminuir a velocidade do aplicativo Então, aqui está uma prévia do que abordaremos neste curso específico Então, começaremos com retornos de chamada e entenderemos como você pode usar retornos de chamada em seu aplicativo baseado em script de trabalho Em seguida, passaremos às promessas, que é uma alternativa moderna e poderosa aos retornos de chamada Aprenderemos esses conceitos ou todos esses conceitos ao longo do curso com a ajuda de exemplos reais e de forma prática. Por fim, exploraremos as palavras-chave async e await, e você escreverá um código assíncrono que se parece e se comporta exatamente como o código síncrono que se parece E é simples e muito, muito poderoso. Vamos desvendar essas possibilidades e esses conceitos ao longo deste curso específico e, ao final deste curso, você terá uma sólida compreensão da escrita de código assíncrono no mundo do script Ja Este curso é para desenvolvedores de todos os níveis. Se você é um desenvolvedor de script Ja de nível avançado que está apenas procurando abordar certos conceitos em um Ja Script síncrono, então você pode se inscrever neste curso ou se você é um iniciante que deseja explorar esse conceito de retornos de chamada, promessas e espera assíncrona, então você pode se apenas procurando abordar certos conceitos em um Ja Script síncrono, então você pode se inscrever neste curso ou se você é um iniciante que deseja explorar esse conceito de retornos de chamada, promessas e espera assíncrona, então você pode se inscrever e aproveitar um curso. E se você é um desenvolvedor de nível intermediário, este curso também certamente o ajudará. Portanto, este curso é para desenvolvedores de todos os níveis. Como eu disse, seja você um grande desenvolvedor de nível intermediário ou um profissional de nível avançado. Ok, você vai tirar algo desse curso. Agora, você está pronto para aprimorar suas habilidades em ja Script? Estou super animada. Vamos mergulhar juntos neste curso. 2. Começando uma jornada maravilhosa com uma configuração inicial: Olá, pessoal. Então, para executar o JavaScript, vamos fazer algumas configurações em nossa máquina local, certo? Agora, é claro, você pode executar o JavaScript clicando com o botão direito do mouse assim no navegador , indo até o console e escrevendo tratamentos de JavaScript aqui. Mas isso não é ideal se você quiser escrever scripts longos e grandes para aplicativos web de nível de produção. Agora, é aqui que você precisa de uma configuração em sua máquina local. Então, o que vamos fazer é usar um IDE. Se você não conhece esse termo IDE, ele significa ambiente de desenvolvimento integrado, que fornece o conjunto de ferramentas para escrever código e executá-lo. Então, vou pesquisar o código do Visual Studio porque é isso que vamos usar. Agora, se você já tem um código do Visual Studio instalado em seu sistema ou sabe como instalá-lo, tudo bem. Mas vou supor que você não o tenha instalado em seu sistema para beneficiar os alunos que não estão cientes desse processo. Então, vou acessar esse site específico, code.visualstudio.com Está bem? Um pouco de Zoom in. Agora, aqui, a captura de tela que você vê é aparência do código do Visual Studio, ok? E você pode ver, há um destaque de sintaxe que você pode Portanto, a interface está sendo destacada em uma cor diferente. Os adereços dos botões estão sendo destacados em uma cor diferente. Então, esses são todos os benefícios do IDE, ok? Você pode ver a bela estrutura de pastas no lado esquerdo. Há um terminal abaixo com todo o código de cores e tudo Ele oferece muitos benefícios para o desenvolvedor. Portanto, se você rolar para baixo, poderá ver os suportes de código do Visual Studio. Enquanto estou gravando este vídeo, ele suporta muitas linguagens de programação, ok? Você pode até mesmo adicionar extensões. Agora, o que são extensões? As extensões basicamente estendem ou ampliam a capacidade que o código do Visual Studio tem por padrão. Está bem? Então, se você quiser adicionar algum suporte para Python, ok Então, mais suporte para Python. Então você pode adicionar essa extensão. Se você quiser adicionar suporte ao GeuCpiloto e usar a IA durante a programação, você pode adicionar o Get up Copilot CC Você pode ver que existem inúmeras extensões e há um mercado de extensões de onde você pode baixar e instalar tudo isso, e é gratuito. Você pode ver o copiloto do Git up, um pouco de. Então, tudo está destacando recursos diferentes. Você pode personalizar os temas de cores, configurações e perfis. Há muitas coisas, ok? Tem uma integração muito boa com o sistema de controle de movimento e tudo Está bem? Assim, você pode dar uma olhada neste site e ver o que ele tem a oferecer. Mas se você rolar para cima, aqui você verá esse botão de download para Windows, ok? Agora, se você estiver no Mac ou Linux, verá a opção de download para o sistema operacional apropriado. Ou, se você não estiver vendo por algum motivo, você pode acessar outras plataformas e ver quais plataformas são suportadas aqui. Está bem? Então, eu já tenho o código do Visual Studio instalado no meu sistema, então não vou instalá-lo, mas a instalação é muito simples É como qualquer aplicativo que você instala no sistema. Não há nenhuma configuração complexa que você precise mesmo para Mac, é mais fácil, e você pode ver aqui que existem várias versões, como se você estivesse usando o chip Intel, você pode instalar este. Apple Silicon, você tem esse aqui. E também para sistemas baseados em Linux Ubuntu aqui, você tem a opção de baixar e instalar. Está bem? Agora eu definitivamente tenho isso instalado no meu sistema, ok? Então, aqui, eu o instalei, como você pode ver. Está bem? Então, se você instalá-lo e abri-lo pela primeira vez, é isso que você vai ver. É assim que isso vai mostrar você. Sua visão pode ser um pouco diferente porque eu já sou usuário do Visual Studio Code, então estou vendo os projetos recentes que usei. Então eu vou fechar isso, ok? E aqui está me perguntando que, Ei, você ainda não abriu nenhuma pasta. Sim, você pode abrir pastas aqui na barra lateral esquerda e ela mostrará a estrutura da árvore. Você pode criar arquivos e gerenciá-los aqui mesmo, ou pode até mesmo clonar um repositório E, como eu disse, ele tem uma integração muito boa com os sistemas de controle Git of Ocean Então você também pode fazer uso disso. Tudo bem? Agora, o que eu pediria que todos vocês fizessem é acessar sua estrutura de pastas e criar uma pasta, quando forem praticar o Jscript Está bem? Então esta é a minha pasta onde vou praticar o Ja Script, ok? E basta abrir essa pasta aqui no código do Visual Studio. Abra a pasta, você pode dizer abrir pasta e navegar até a pasta que acabou de criar. Ou, alternativamente, você está no Windows, você tem uma opção. Você pode clicar com o botão direito do mouse. Você pode dizer mostrar mais opções e pode dizer abrir com o código do Visual Studio aqui. Abra com o código aqui. Isso é o que é. Então, isso é o Visual Studio, que não é o código do Visual Studio, é diferente. Então você tem que dar uma olhada nesse logotipo. Está bem? Essa. Está bem? E se você disser abrir, você verá a pasta aberta aqui. Ok. Maximize isso. Está bem? Você pode ver. Agora eu tenho duas instâncias ou duas janelas ou código do Visual Studio aqui. Está bem? Esta é minha pasta que eu criei chamada JavaScript. E é aqui que vou criar todos os meus arquivos relacionados ao Ja script e tudo que vou aprender. Então é só isso. Espero que você também tenha conseguido fazer essa configuração com sucesso em seu sistema. 3. Dominando as chamadas de volta: os fundamentos do JavaScript assíncrono: Então, agora é a hora de falarmos sobre retornos de chamada. Agora, o que é um retorno de chamada? Então, por definição, um retorno de chamada é uma função que é passada como argumento para outra função Está bem? Uma função que é passada como argumento para outra função e executada após conclusão de um determinado evento ou operação. Agora, vamos entender em detalhes por que você precisa de algo chamado callbacks Está bem? Então, deixe-me dar um exemplo. Agora, haverá cenários em que você está trabalhando em algum tipo de código em que precisará realizar algum tipo de evento externo ou interface com algum sistema externo, ok que pode levar um pouco de tempo , pode não ser instantâneo como as operações básicas, mas pode envolver algum tempo que seu sistema precise esperar para obter a saída, ok? Por exemplo, uma chamada de API. Então, se você estiver fazendo uma chamada de API, o que aconteceria se você normalmente esperasse pela resposta da chamada de API, certo? Não é como se você acionasse a chamada da API e recebesse uma resposta instantânea. Não é assim. Você acionou uma chamada de API, espera pela resposta, recebe a resposta e depois usa a resposta. Está bem? Então, vamos simular um cenário em que fazemos uma chamada de API Ok. Então, o que eu faria é simular um cenário com a ajuda da função de tempo limite. Está bem? Então, em JavaScript, temos algo chamado tempo limite, ok, que basicamente usado pode ser usado para definir um atraso no seu lado Está bem? Então, deixe-me dar um exemplo aqui. Está bem? Então, digamos que eu tenha essa mensagem. Ok, então eu posso dizer Console dot log aqui. Ok. E posso dizer imediato. Agora, essa mensagem será exibida imediatamente, certo? Não é como se fosse exibido depois de um tempo aqui, certo? Ele seria exibido imediatamente. Está bem? Mas haverá cenários em que talvez eu queira causar um atraso Então, nesse caso, você pode usar o tempo limite. Então você pode dizer que defina um horário aqui. Ok. Eu posso ter uma função como essa, o. E isso seria uma função anônima, sem parâmetros. Eu posso dizer Csol log, eu posso dizer atraso. Algo parecido com isso. E eu posso até definir o tempo de atraso. Então, digamos 2000. Agora, 2000 são milissegundos, o que significa que serão atrasados em 2 segundos. Então eu posso salvar isso. Você pode ver imediatamente e depois de 2 segundos, você verá um atraso aqui, certo? Então é assim que funciona. Se eu adicionar três pontos aqui, se eu salvar isso, você verá imediato e depois um atraso Está bem? Então, por que estamos aprendendo sobre o tempo limite agora? Por que estamos discutindo o tempo limite? Porque vamos usar o tempo limite para simular um exemplo de algo que depende de um sistema externo, como uma chamada de API, A chamada de API levará um pouco de tempo, certo? Por exemplo, você acionará sua solicitação para o servidor e, em seguida, o servidor processará a solicitação. Vou falar com o banco de dados e ele entrará em contato com você com os dados. Está bem? Portanto, há um pequeno atraso, como 1 segundo, 2 segundos, dependendo da velocidade das coisas , certo? Então, haverá um atraso, e como podemos simular um atraso Simularemos o atraso no código R com a ajuda do tempo limite Certo? Então, digamos que eu tenha um trecho de código aqui. Ok. O que eu vou fazer é criar uma função. Está bem? Então, há uma função. Vou chamar essa função de buscar dados aqui. Está bem? Eu não preciso de nenhum tipo de parâmetro aqui. Ok. E eu terei definido o tempo limite aqui assim. Ok. E eu posso realmente usar as funções de seta aqui. Está bem? Em vez da sintaxe antiga, posso atualizar para as funções de seta E aqui, posso dizer que os dados foram obtidos do servidor. Está bem? Então, eu posso obter dados de. Ok. E aqui, posso adicionar um atraso de 2 segundos. Está bem? Então, isso está feito. Tudo bem. E o que podemos fazer é chamar essa coisa em particular. Ok. Então, digamos que eu tenho, eu posso dizer função aqui. Eu posso dizer que os dados do processo estão aqui, ok? E aqui, posso dizer buscar dados, algo assim. Ok. Estou chamando isso. E eu estou chamando dados do processo. Está bem? Estou dizendo, ok, então estou dizendo dados do processo. Ok. Algo parecido com isso. O que está acontecendo é que eu estou chamando primeiro os dados do processo aqui, como você pode ver, dados do processo. Os dados do processo estão então chamando fetch data, e fetch data está fazendo algum tipo de operação, como falar com um EPI ou algo assim, e está obtendo Está bem? Se eu salvar isso, ok, você verá o atraso e os dados do servidor após 2 segundos. Está bem? Então, por enquanto, vou remover isso, vou apenas comentar isso , pois entendemos o que é o tempo limite Mas aqui, o que estamos tentando fazer é buscar os dados e os dados estão sendo buscados com um atraso de 2 segundos Está bem? Agora, digamos que estamos buscando os dados e obtemos algum tipo de resposta que queremos capturar Ok. Digamos que estamos buscando os dados e obtemos uma resposta do servidor que queremos capturar Então, terei um retorno hipotético aqui, que representará Digamos que esses sejam os dados que estão sendo representados pelo servidor. Está bem? Está dizendo dados de amostra. Está bem? O que aconteceria nesse caso é que eu poderia obter os dados aqui. Posso dizer que deixe os dados aqui. Ok. Eu posso fazer um log do console aqui. Ok, eu posso ver dados, algo assim. Se eu salvar isso, você verá que não recebo uma saída. Eu fico indefinido. Está bem? Isso não funcionou porque busca de dados tem um atraso, certo? Então essa coisa demorou 2 segundos para retornar. Está bem? Mas o que aconteceu foi que isso foi executado antes de retornar, certo? Isso tem um atraso de 2 segundos. Então, essa coisa não esperou que terminasse de ser executada e voltasse com o resultado Em vez disso, ele executou isso primeiro. Certo? Então, o que aconteceu é que ficamos indefinidos Então os dados foram retornados, mas esse código foi executado e isso não funcionou como esperado, certo? Agora imagine ter uma chamada de API aqui, chamada de API real em vez de um tempo limite aqui Estou recebendo uma chamada de API e estou obtendo alguma resposta do servidor Agora, preciso ir. Preciso esperar para receber a resposta do servidor, certo? Não posso simplesmente prosseguir diretamente para a próxima etapa, certo? E é aqui que os retornos de chamada entram em cena, certo? Essa é uma necessidade de retorno de chamada. Então, este exemplo, você pode ver, assumindo que aqui você está tendo algum tipo de operação que está causando algum tipo de atraso Ok, de cerca de 2 segundos. E simulamos esse atraso com a ajuda dessa função de tempo limite definida Então, supondo que você esteja tendo uma operação que está causando um atraso, ok, é assim que as coisas funcionariam sem retornos de chamada, Portanto, você precisa de um retorno de chamada, que é uma função passada como argumento para outra função e executada após conclusão de um determinado evento ou operação Agora, qual é o evento no nosso caso? O evento em nosso caso é essa operação de busca ou essa operação atrasada que estamos tendo Está bem? Então, como as coisas funcionariam? Deixe-me atualizar esse exemplo aqui, ok? Então, o que eu faria é receber um retorno de chamada aqui, algo assim Ok. E o que podemos fazer é me deixar ou, você sabe, em vez de modificar este exemplo, eu simplesmente copiaria este exemplo, ok E criaríamos, eu manteria esse exemplo intacto e teria um retorno de chamada aqui, ok? E eu vou dizer com uma ligação aqui. Ok, então estou fazendo isso para que tenhamos os dois exemplos e possamos diferenciar qual é a diferença. Está bem? Então você pode ver aqui fetch data e eu estou chamando fetch data com Está bem? Então, busque dados com retorno de chamada, eu posso ter um retorno de chamada aqui Está bem? Isso é um retorno de chamada. Ok. Agora, aqui, posso aqui chamar esses dados do processo com retorno de chamada, ok? E isso está sendo chamado daqui. Agora, como eu modificaria isso é usar esses dados como um parâmetro aqui. Ok, eu me livraria disso aqui. Ok. Portanto, essa é a função de retorno que seria executada quando a operação fosse concluída Então, essa operação de tempo limite, uma vez concluída, o que precisamos fazer é imprimir os dados, certo? Então, estou aceitando dados como um parâmetro aqui e estou fazendo um log do console, ok. O que eu faria é sempre que chamasse esses dados do processo, com retorno de chamada O que eu faria é, em vez de chamar isso, eu diria buscar dados com retorno de chamada aqui Eu chamaria imediatamente essa função aqui e passaria isso como argumento, essa função Então, estou usando retornos de chamada agora. E se eu salvar isso, ok, deixe-me adicionar algo aqui com retorno de chamada. Está bem? E isso é feito com o retorno e eu estou recebendo os dados. Vou adicionar um coolin. Está bem? Agora, aqui, ao invés de voltar, o que eu posso fazer é dizer aqui. Eu tenho que criar dados primeiro, ok? Então, eu vou dizer dados. É igual a algo assim. Então, esses são os dados. Então, digamos que esses são os dados que estão sendo retornados do servidor. Agora vou pegar esses dados e dizer callback e passá-los para os dados, algo assim Se eu salvar isso, você verá que o primeiro é indefinido. Você pode ver os dados do servidor, os dados do servidor, e aqui você vê com o retorno de chamada, certo? Portanto, os dados do servidor estão sendo impressos duas vezes por causa desse log do console. Então, se eu me livrar disso e salvar isso, você verá os dados do servidor. Então, este é um, e então você tem com dados de amostra de retorno de chamada aqui Então, espero que esteja claro qual é o uso do retorno de chamada aqui, qual é o caso de uso Então, aqui, essa era uma função que deveria ser executada quando os dados fossem retornados com sucesso. Está bem? Então aqui, se você ver quando os dados foram retornados com sucesso, essa função estava sendo executada, como um código dentro disso, certo? Então, em vez de fazer isso, o que fizemos foi passar essa função em si. Então aqui você pode ver que essa função em si está sendo passada aqui para outra função, ok? Essa é uma função que está interagindo com a API ou realizando algum tipo de operação que está causando atraso, ok? E aqui, essa função está sendo passada como um retorno de chamada. Ok. Então, quando a operação estiver concluída, a função de retorno de chamada está sendo chamada com os dados e os dados estão vindo aqui e imprimindo os dados aqui, certo? Então, espero que isso esteja claro. Então, em vez de ficar indefinido agora, o que está acontecendo é que toda essa operação está esperando Ele está aguardando 2 segundos até que os dados sejam buscados. E então esses dados do processo com retorno de chamada são chamados junto com os dados recebidos do servidor e, em seguida, são impressos no controlador, seja qual for a operação que você deseja realizar e que possa ser adicionada aqui Ok. Então é assim que o retorno de chamada funciona, e espero que esteja claro por que isso é importante Está bem? Agora, mais uma coisa que quero mostrar aqui, você pode ter retornos de chamada, como retornos de chamada para sucesso, bem como erros, ok Então isso é algo que eu gostaria de mostrar a todos vocês. Está bem? Então, o que você pode fazer é antes de usar retornos de chamada com sucesso e erros, eu também quero mostrar uma sintaxe aqui, que é de funções de retorno de chamada anônimas Ok. Então, aqui, o que estamos fazendo está aqui neste exemplo específico, se eu copiar isso. OK. Isso não é anônimo, certo? Então, deixe-me atualizar esses dois. OK. Eu vou dizer nada aqui. OK. E este também não Este também não está aqui. OK. Espero que tudo esteja atualizado. Tudo bem Agora, o que está acontecendo é que estamos realmente passando essa função para essa função específica aqui, certo? Assim, podemos encurtar a sintaxe. O que eu posso simplesmente fazer é simplesmente cortar isso, aqui, eu posso simplesmente dizer função. Eu posso simplesmente aceitar dados aqui e posso simplesmente fazer isso, opa, eu não precisava de uma frase encaracolada, eu posso simplesmente colar isso assim Está bem? Agora, isso não é necessário, é assim que a sintaxe se torna, com anonimato Posso dizer que não há nada aqui. Eu posso salvar isso e você verá os dados do servidor com retorno de chamada sem, você pode aumentar isso para 3 segundos. Vamos ver como isso funciona. Tudo bem Você pode ver dados do servidor, dados com retorno de chamada e dados sem Ou se eu atualizar isso para 10 segundos, ele deve funcionar bem. Ok, na verdade, um erro aqui, isso é chamar fetch data com callback OK. Então, ainda está se referindo à função interessante, mas vou atualizá-la também com Annan aqui Eu queria saber por que não está refletindo as mudanças em segundos. Então você pode ver aqui depois de 10 segundos. Agora com Annan, será refletido aqui Você pode ver. Ok, você pode ver. Portanto, funcionou perfeitamente bem com uma sintaxe mais curta. Portanto, este é um exemplo de funções de retorno de chamada anônimas. Está bem? Agora, gostaria de falar sobre retornos de sucesso e erros Agora, haverá cenários em que, se você estiver fazendo uma ligação para a EPA, tudo bem, existe a possibilidade de as coisas serem bem-sucedidas e não serem bem-sucedidas, certo Então, vou copiar isso aqui. Digamos que há uma operação que queremos realizar. Ok. Eu vou dizer com erro de sucesso, algo assim. Você pode ter dois retornos de chamada aqui. Sucesso, retorno de chamada e você pode ter erro, retorno de chamada, algo assim OK. Então, o que acontece é que aqui dentro, dentro do tempo limite definido, você pode ter algum código Digamos que eu tenha um código. Requeijão. Ok. Ocorreu um erro , digamos que vou manter esses dois verdadeiros. Digamos que seja um valor booleano aqui. OK. Agora, opa, se ocorreu um erro , o que eu preciso fazer é ligar para o Success callback, certo Retorno de chamada bem-sucedido com alguns dados, posso passar alguns dados, como erro Cordão ou algo parecido. Está bem? E se esse não for o caso, então eu posso dizer “sim” aqui. OK. E em vez disso, eu posso dizer, ok, então se não for um erro, então provavelmente você pode ter a coisa normal acontecendo assim. Ok, você pode ter isso. E em vez de chamar o callback aqui, você dirá, opa, isso não deve ser Isso deve ser um retorno de chamada bem-sucedido. E, na verdade, se for um erro, você chamará o callback de erro aqui, algo assim, certo? Então é assim que as ligações serão, certo? E você pode ver, então vamos mudar isso para quatro, ok, 4.000 milissegundos aqui. OK. Agora, o que você pode fazer é criar esses dois retornos de chamada também aqui Está bem? Então, aqui, eu posso dizer função. OK. Então, trabalhe com sucesso dessa forma e você pode dizer os dados aqui. OK. E aqui abaixo, você pode dizer que não confirma. Deveria ser o log de pontos do console aqui, e você pode dizer sucesso. Ok. E você pode imprimir dados no console. OK. Agora, a mesma coisa que você também pode duplicar por erro Então você pode dizer, sem erro, OK, assim. E em vez de sucesso, você pode dizer erro e ele exibirá os dados. Está bem? Então, essas são duas funções. Agora, o que você pode fazer é chamar isso, ao chamar os dados de busca Então, se você diz buscar dados com sucesso e erro, você pode dizer sobre sucesso: OK Sobre o sucesso em primeiro lugar porque você tem o retorno de chamada de sucesso definido primeiro, certo? E então, em caso de erro, algo assim. Agora, se você salvar isso, não verá nenhum erro sendo impresso porque simulamos a situação de erro Você pode ver que ocorreu um erro de erro, certo? Então você pode ver, e isso está sendo impresso. Ocorreu um erro de erro, certo? Agora você pode atualizar esse exemplo para o exemplo de função anônima. Então, primeiro de tudo, esse é um exemplo de sucesso e erro. Está bem? Você também pode randomizar isso, para que eu possa usar pontos matemáticos aleatórios Pontos matemáticos aleatórios aqui. OK. Se você disser pontos matemáticos aleatórios, é um método dentro de um objeto matemático. Então você pode ver que está me dando valores aleatórios de 0 a 1. Você pode ver aqui no console. OK. Agora posso dizer que pontos matemáticos aleatórios são menores que 0,5. Isso me dará um valor booleano, verdadeiro, às vezes verdadeiro, às vezes falso Então eu posso ter essa condição copiada e adicionada aqui. Está bem? Então, essa condição de erro ocorreu agora é dinâmica, certo? Então, se eu salvar isso, você pode ver o erro, você pode ver o erro e sucesso será praticamente dinâmico. Agora, se eu salvá-lo novamente, agora foi uma situação de erro , também pode ser um sucesso. Está bem? Você pode ver exemplos de dados de sucesso, certo? Você pode atualizar isso para uma função anônima, então eu posso cortar isso aqui. OK. Você pode dizer assim. OK. E então você tem isso aqui. OK. Então isso está feito, ok? E então você também pode ter o erro. Agora, você também pode encadear retornos de chamada, ok? Então, deixe-me mostrar como você pode fazer isso. Está bem? Então, retornos de chamada encadeados. Tudo bem Então, digamos que eu tenha uma função. Ok, então eu vou ter essa função aqui. OK. Deixe-me chamar isso. Oh, desculpe. Deixe-me copiar isso. Então, vou chamar essa função como etapa um. Ok, tem um retorno de chamada, defina o tempo limite. E aqui, vou colocar o registro do console aqui, que diz o primeiro passo até aqui. Ok, algo assim. Estou ligando. Também estou recebendo um retorno de chamada aqui, que não aceita um parâmetro OK. E em vez de 10.000, vou ficar com milhares aqui. Então essa é uma função que eu tenho com um retorno de chamada. Esse é o primeiro passo. Digamos que eu tenha uma etapa dois. Então, eu estou fazendo um conjunto múltiplo de operações aqui. Está bem? Esse é o segundo passo. Eu vou dizer que esta é a segunda etapa novamente aqui. OK. Eu virei aqui novamente. Eu vou dizer que esta é a etapa três, algo assim. Esta é a etapa três novamente aqui. OK. Então, por aqui. Agora, o que eu posso fazer é dizer o primeiro passo. Então, o primeiro estilo é chamado de primeiro passo. OK. No primeiro passo, eu vou ter uma função de seta como esta, e aqui eu posso dizer o passo dois. Então, dentro da função de seta, direi a etapa dois. Agora, a etapa dois precisa de um parâmetro. Em vez disso, vou passar uma função de seta aqui novamente. OK. E então aqui, terei novamente a etapa três, algo assim. Eu vou dizer algo assim. Assim e aqui, assim. OK. E aqui, vou apenas mencionar o log de pontos do console , tudo bem? Algo parecido. Tudo concluído. Eu vou dizer passos, ok? Vou adicionar ponto e vírgula aqui. E eu vou ver o CV Okay. Agora você vê a etapa um concluída, etapa dois concluída, a etapa três concluída e todas as etapas concluídas. Tudo bem. No final, você vê dados de amostra de sucesso porque o tempo limite era muito maior, sim E esse também teve um tempo limite maior, certo? Mas aqui você pode ver que os passos um, dois e três foram concluídos, ok? E é assim que você pode fazer uma operação que envolve várias operações assíncronas Agora, também, gostaria de destacar mais uma coisa aqui, como essa coisa de encadear retornos de chamada, também conhecida como inferno de retornos de chamada Então, se você pesquisar no Google ou se estiver lendo sobre JavaScript ou retornos de chamada, encontrará esse termo chamado Inferno de retornos de chamada, e é isso que é Em que você está encadeando retornos de chamada ou criando uma pirâmide de retornos de chamada, em que os retornos de chamada estão aninhados uns nos outros Então, eles estão aninhados um dentro do outro. Agora, essa não é uma prática recomendada, certo, porque também está tornando o código mais difícil de ler e manter. Então, qualquer pessoa lendo seu código amanhã, ok, seria difícil para ele entender o que está acontecendo aqui, certo? E se você tiver mais call wax ou mais operações assíncronas, mais códigos APA fazendo , seria ainda mais difícil e você poderia até cometer erros como desenvolvedor Certo? Então, sim, isso é o inferno do callback Não é uma prática recomendada, mas eu gostaria de explicar e ensinar esse conceito para todos vocês, ok? Agora, você pode até mesmo usar retornos de chamada, ok, use retornos de chamada com métodos de matriz Está bem? Portanto, as matrizes têm alguns bons métodos que são úteis aqui Está bem? Deixe-me demonstrar isso para você, que eu possa dizer números aqui ou eu deveria dizer números. OK. E eu tenho um, dois, três, quatro, cinco e seis, ok. OK. Agora, você pode dizer, digamos que desejamos dobrar ou obter uma matriz em que cada número seja dobrado nessa matriz Então, posso dizer que vamos dobrar os números, ok. E aqui, o que eu posso fazer é dizer números ensinados a mapear. Ok, então eu vou ter um mapa aqui, e aqui eu posso ver a função. Eu vou ter uma declaração de função. Isso não terá nome. Você pode até criar uma função usando funções de seta, mas eu estou fazendo isso dessa maneira e você pode ver os números retornados em dois, algo assim. Você está apenas dobrando o número aqui. Está bem? E então aqui, você está vendo o log do console. Ok, então eu vou apenas dizer que vá aqui. E você pode dizer números duplos, algo assim. OK. Então, agora, ok, estamos recebendo um erro que a referência numérica não está definida. Está bem? Então, números de função. Ok, então isso tem que ser números. Ou você pode chamar isso de número, ok, não números. De qualquer forma, números é o nome da matriz. Então, se você salvar isso, verá que essa é a saída. Está bem? Então, o que está acontecendo é essa função de mapa está recebendo callback como entrada, ok, porque isso também é função e isso também é função Você pode ver? Então é assim que está operando. Está bem? Portanto, os métodos de mapeamento usam uma função de retorno de chamada e a aplicam a cada elemento nas matrizes Tudo bem? Então, sim, isso é sobre retornos de chamada, tudo bem. Agora, voltando à teoria, ok? O que são retornos de chamada? Então você está bem claro agora. Os retornos de chamada são uma função que é passada como argumento para outra função e executada após a conclusão de um determinado evento ou operação Portanto, eles permitem que você controle a ordem de execução, gerencie várias tarefas e também responda aos eventos, certo? Mas lembre-se de que o uso excessivo de retornos de chamada aqui, como vimos, pode levar ao inferno dos retornos de chamada Ok, e isso não é uma boa prática, certo? Então, sim, esses são retornos de chamada e espero que tenham sido úteis 4. Promessas desbloqueadas: escrevendo um código assíncrono mais limpo e gerenciável: Então, agora é hora de falarmos sobre promessas e como elas podem facilitar nossa vida. Então, como diz a definição aqui, promessas fornecem uma maneira mais limpa e estruturada de lidar com operações assíncronas Claro, quais são esses métodos, falaremos sobre eles. Mas primeiro, vamos entender o que são promessas. Portanto, sempre que você estiver fazendo uma operação assíncrona, uma forma de realizá-las é com retornos Então, se eu pagar algum código aqui, essa é uma operação assíncrona que está acontecendo, e eu estou fazendo uso de retornos de chamada Então você pode ver que essa é uma função que está fazendo a operação. Estou aceitando um parâmetro chamado callback e tenho essa operação assíncrona em que você pode assumir que estou buscando alguns dados do EPI, e esses são os dados que e esses É um objeto. E então eu estou chamando essa função de retorno de chamada aqui quando esses dados são buscados, certo Agora, essa função de retorno de chamada é na verdade, essa função que está sendo passada Então, quando estou chamando G data, estou passando essa função anônima com a ajuda da sintaxe da função de seta, e você pode ver que ela está sendo chamada quando a opção Obter dados é concluída Então, se eu salvar isso, você verá depois de 1 segundo esses dados estão sendo impressos no console. Então, isso são retornos de chamada, mas promessas uma abordagem melhor sempre que você estiver trabalhando com operação assíncrona Porque se você estiver fazendo muitas operações assíncronas , o retorno de chamada pode levar ao inferno do retorno de chamada, onde pode ser difícil gerenciar diferentes retornos inferno do retorno de chamada, onde pode ser difícil gerenciar diferentes retornos de chamada quando os usa extensivamente, certo? Portanto, as promessas são uma abordagem melhor. Agora, deixe-me converter esse exemplo em um exemplo com promessas, ok? Então, vou escrever o mesmo exemplo que estou realmente obtendo esses dados JCN de, digamos, um servidor, e farei isso com a ajuda de promessas, ok? Então, vou copiar essa função, primeiro de tudo, ok? E eu vou me livrar dessa parte aqui, porque é isso que vamos mudar. Agora, em vez de ter esse tempo limite e depois fazer um retorno de chamada ou fazer uma chamada para essa função de retorno de chamada, o que vou fazer é remover isso Eu vou dizer: devolva uma nova promessa, ok? Prometo, algo assim. OK. Agora, se você passar o mouse sobre isso, deixe-me ver se temos uma documentação Ok, você pode ver aqui. Então isso é uma promessa, ok? E você terá uma promessa aqui, você terá uma função, ok? Então, aqui dentro, eu vou ter uma função de seta para encontrar assim. OK. Assim. Tudo bem, e eu vou adicionar um ponto e vírgula aqui OK. Agora, essa promessa precisa dessa função e, dentro dessa função, você precisa de dois parâmetros. Agora, quais são esses parâmetros? Uma será resolvida e a outra será a reverificação do nome aqui Está bem? Agora, por que temos determinação e por que temos reverificação Agora, sempre que você estiver fazendo uma operação assíncrona, podem ocorrer dois estados Uma delas é que a operação assíncrona foi bem-sucedida. E o segundo estado pode ser que a operação assíncrona que você executou não tenha sido bem-sucedida Está bem? Então, aqui, se você ver um pouco de documentação, verá que você tem dois argumentos ou um retorno de chamada resolvido Resolvido significa que a operação foi bem-sucedida Portanto, resolver é apenas um termo usado para dizer que o retorno de chamada ou qualquer outra operação que tenha ocorrido foi bem-sucedida, o e rejeitar, o que significa que o erro aconteceu ou, por algum motivo, a operação não foi bem-sucedida Então, estamos tendo dois retornos de chamada aqui , resolva e verifique novamente Está bem? Agora, o que vamos fazer aqui é que eu vou ter a lógica. A operação assíncrona vem aqui. Então, qual é minha operação assíncrona? Vou pegar essa operação assíncrona, vou adicioná-la Está bem? Agora, mais uma mudança que precisamos fazer é aqui que estamos chamando de callback, certo? Então, vou me livrar do retorno de chamada por aqui. Não precisamos de retorno de chamada. E em vez de ligar de volta, direi resolver. Por aqui, algo assim. Então, o que estou fazendo é que, quando a operação estiver concluída, estou dizendo para resolver essa chamada em particular . Isso é o que eu estou fazendo. Está bem? E a resolução será chamada e, em seguida, quem for o chamador, poderemos executar as próximas etapas Então, o que eu posso fazer aqui é dizer obter dados, assim. Ok, então eu vou ligar para obter dados. Mas agora isso está retornando uma promessa, certo? Então eu posso dizer ponto. Agora, existem dois métodos que você precisa conhecer e descobrir aqui. OK. Agora, o que é então? Se você esperar, talvez eu veja sua documentação. Ok, eu não estou vendo eles. Mas então, na verdade , é a conclusão bem-sucedida dessa promessa. Está bem? E se você quiser lidar com erros, precisará fazer isso no cache. Então aqui você pode ver, Data, e eu vou ter uma função de seta aqui, algo assim, e eu vou dizer log aqui. Ok, e eu vou dizer dados, algo assim. OK. E então eu posso copiar essa mesma coisa aqui. Em vez de Tita, eu posso ver um erro aqui, assim. E em vez do log de pontos do console, posso registrar o erro nesse formato e salvá-lo. Está bem? E você pode ver a saída aqui. Está bem? Você pode ver que a saída que estou recebendo é apenas uma. Idealmente, eu deveria comprar dois, um para isso e outro para este Mas parece haver um problema porque os nomes das funções são os mesmos aqui. G data, obtenha dados, em qualquer lugar, obtenha dados. OK. Então, vou ligar para esse, obter dados. OK. Vou ver com promessa aqui, algo assim. OK. E em vez de chamar get data aqui, direi get data com promessa. Tudo bem? Então, agora há algum tipo de separação nos nomes aqui. Isso é obter dados, e isso é obter dados com promessa. E se você salvar isso, verá que este é do primeiro e este é do segundo. Está bem? Então, funciona perfeitamente bem, e você pode ver o que aconteceu aqui. Está bem? Então, o que fizemos foi definir essa função get data with promise com um retorno aqui. Então, isso é um retorno. Está retornando uma promessa agora. Certo? Agora, dentro do construtor de promessas Então, ao chamar essa promessa ou ao criar essa promessa, dentro desse construtor, simulamos uma operação assíncrona de recuperação de dados ou ao criar essa promessa, dentro desse construtor, simulamos uma operação assíncrona de recuperação de dados usando o tempo limite definido. Ok, então qualquer operação que você esteja fazendo entrará no construtor é algo que você precisa ter em mente OK. Agora, uma vez que os dados sejam recuperados aqui, ok? Depois que os dados forem recuperados, ligamos para resolver aqui OK. Agora, a função resolve é chamada aqui para cumprir a promessa com os dados de recuperação Então, estamos passando os dados também porque queremos cumprir essa promessa agora com os dados recuperados E então o que acontece é que quando você liga para get data with promise aqui, ok? Você está aproveitando isso e pegando aqui. Portanto, esses são dois métodos que podem ajudá-lo a lidar com o cumprimento bem-sucedido da promessa ou com o fracasso da promessa Então, está sendo usado para lidar com o cumprimento bem-sucedido Então, aqui, se você rolar para cima quando a promessa for cumprida e entender quando a promessa for rejeitada. Assim, você pode ver se há algum erro, a promessa é rejeitada e o cache será executado. Está bem? Portanto, você pode ver que essa é a sintaxe da promessa e, dessa forma, eles fornecem uma maneira mais limpa e estruturada de lidar com operações assíncronas Tudo bem. Lembre-se de que a operação que você deseja fazer, ok, será exibida aqui dentro do construtor Você pode ver tudo isso aqui, tudo isso está dentro do construtor de promessas Está bem? Então essa é a promessa. E então, se eu ver o controle, C, você pode ver que tudo isso está acontecendo dentro do construtor Isso é o que você deve ter em mente. Agora, essa definição está ficando um pouco complicada porque diz apenas que fornece uma maneira mais limpa e estruturada lidar com essas operações de sincronização. Está bem? Portanto, você também pode pensar nas promessas dessa forma as promessas realmente representam um valor que pode estar disponível agora. Pode estar disponível no futuro ou pode nunca estar disponível porque, se estiver disponível agora, tudo bem, está disponível. Se não estiver disponível, está sendo buscado, certo? Então isso é um estado. E se nunca estiver disponível, significa que ocorreu um erro. Então, esses são os três estados que normalmente uma promessa teria. Certo? Então, sim, isso é sobre a promessa. Agora, deixe-me mostrar o cenário de falha também aqui. Ok, então o que eu vou fazer é vir até aqui. Vou apenas duplicar esse código aqui com promessas e vou adicionar dois pontos Eu vou dizer sucesso e fracasso aqui, algo assim. Vou chamar isso de tudo como um. Uma delas é apenas diferenciar o nome da função para que não haja conflitos como tais Está bem? Então, estamos trabalhando com isso agora, um. OK. Portanto, obtenha dados com a promessa número um. Agora, aqui, eu vou ter, digamos, uma taxa de sucesso, sucesso ou fracasso definida. OK. Então, dentro do tempo limite, posso dizer que deixe o sucesso. Ok, então eu terei uma taxa de sucesso de 50%. Então, eu vou dizer pontos matemáticos aleatórios aqui. E se a matemática aleatória for menor que 0,5, ok? Então, isso dará uma resposta verdadeira ou falsa. Então, o sucesso terá um valor booleano, seja verdadeiro ou falso, certo? E então aqui, o que eu posso fazer é dizer se a declaração está aqui, ok? E eu posso dizer se foi sucesso. Tudo bem, então estamos recebendo esses dados, mais ou menos. Vou mover isso para dentro. Tudo bem. E se não der certo, então eu tenho um bloco s aqui. OK. E dentro de mim, posso dizer que rejeito. Está bem? Então, resolva para que serve a resolução? Resolver é resolver a promessa. Significa que a busca de dados foi bem-sucedida Resolva essa promessa Agora, se ocorrer um erro, você ligará para rejeitar aqui e passará uma mensagem. Você pode passar uma mensagem. Você pode fornecer qualquer motivo, como erro e algum motivo, aqui. Então, vou apenas dizer algum motivo. OK. Você pode adicionar o motivo dependendo do seu cenário, tudo bem. Mas é assim que vai ser, ok? E eu tenho FLs e não há mais nada. Está bem? Então, agora, se você salvar isso para ter sucesso aqui. Se você salvar isso novamente, vamos ver, você pode ver um erro por algum motivo. Então essa condição falhou e você está recebendo um erro aqui. Então, essa promessa falhou, na verdade. Está bem? Então é assim que você pode lidar com o sucesso e os fracassos. Está bem? Então, se você quiser, se tiver um cenário, não lidamos com esse cenário, apenas dissemos resultado. Está bem? Então, apenas cuidou do resultado. Mas agora, se houver um erro ou algo parecido, você pode, por exemplo, verificar os dados que está recebendo do servidor. Se os dados recebidos forem nulos, você poderá dizer rejeitar e haverá algum erro Está bem? Então, nesse caso, se a rejeição estiver sendo chamada, o cache será executado aqui, e tudo o que estiver lá no cache será executado. Tudo bem. Então, sim, este é um exemplo de sucesso e fracasso com promessa. Agora, ao trabalhar com promessas, haverá cenários em que talvez você queira executar um trecho de código, independentemente de a promessa ser cumprida ou rejeitada, certo? Então, nesse caso, você finalmente tem isso, ok? Você pode dizer que finalmente está aqui. OK. E de forma semelhante, como se você tivesse definido as outras duas coisas, você pode dizer console dot log, o, e você pode dizer, finalmente. OK. Gostaria apenas de acrescentar esta mensagem. Está bem? Você pode ter qualquer tipo de mensagem aqui. Portanto, isso será executado independentemente de haver sucesso ou fracasso Então, se eu salvar isso, você vai ver finalmente, ok? E você pode ver que há uma falha. Está bem? Se eu salvar isso novamente, ok, estou recebendo a mesma saída. Ok, isso é novamente um fracasso. Você pode ver que desta vez é um sucesso e, finalmente, também consegue. Está bem? Então, finalmente, também faz parte. Mas sim, a coisa principal se resolve nessa época e pega aqui Está bem? Agora, deixe-me mostrar mais um cenário, ok, em que você pode querer ter várias promessas juntas Então, vamos dar um exemplo em que queremos executar várias promessas em paralelo Está bem? Então você pode dizer várias promessas aqui. OK. Agora, deixe-me criar várias promessas. Eu vou dizer, vamos prometer um. Está bem? Como você criaria isso? Você acabou de ligar para buscar dados com a promessa, ok? Portanto, busque dados com promessa. OK. Deixe-me copiar isso. Ok, não é buscar, na verdade, é obter dados com a promessa um. Desculpe por isso. OK. Então, sim, eu chamo isso de ok. E nessa chamada, ele retornará um objeto prometido. Ok, então eu estou trazendo isso aqui. Está bem? Então isso é um, isso é dois e isso é três. Preciso renomear isso. Serão dois, e isso é três. Tudo bem. Então, três promessas criadas. Agora, digamos que eu deseje que todas essas três promessas sejam executadas em paralelo. Então, o que eu posso fazer é dizer promessa aqui no ponto A. Você pode ver todo esse método. E aqui, você pode passar uma matriz com a promessa um, promessa dois. E promessa três, algo assim aqui. OK. E então aqui, você pode dizer, então, mais ou menos, e você pode ter os resultados aqui. Está bem? Então, depois que isso for feito, digamos que eu queira fazer isso. OK. Então, eu vou ter isso e, em vez de você, posso dizer que está tudo pronto. OK. Então, eu vou terminar essa mensagem, algo assim. Está bem? Ou então você também pode adicionar um cache, para que eu possa copiar isso aqui. OK. E aqui eu posso adicionar um cache. Tudo bem. E isso terminará com ponto e vírgula. Então eu posso salvar isso. E você vai ver. Então esses dois são executados, ok? E espere. Deixe-me elogiar essas duas ligações porque agora estamos fazendo muitas ligações, ok? Portanto, você pode obter ou deixar que eu adicione um login do console no meio. OK. Então, o que eu faria é copiar esse log do console aqui. OK. E aqui, eu diria que vários. Algo parecido com isso. OK. Então, agora você veria que vários estão sendo impressos. Está bem? Ok, na verdade é uma chamada assíncrona Então, está sendo impresso no primeiro. OK. O que eu teria que fazer é desativar essas chamadas. Isso seria o melhor, eu acho. Está bem? Então, opa, desativaria isso também. OK. E eu desativaria este com sucesso e fracasso. Assim. OK. E vou ver se é isso. OK. Agora você pode ver que este foi rejeitado. OK. Então, estou recebendo esse erro. Deixe-me ver o cenário de sucesso aqui. OK. Então, estou recebendo apenas erros. OK. Tudo bem, então você pode ver tudo pronto aqui. E todas as três promessas foram bem-sucedidas. Você pode ver aqui. OK. Então é assim que é. Você pode adicionar se quiser. Não adicionamos uma mensagem personalizada para a falha. Você pode ver que pelo menos uma promessa falhou. Está bem? E se você salvar isso, verá que pelo menos uma promessa falhou. Então, uma coisa que eu gostaria de mencionar aqui é que, se alguma promessa falhar, ok, o resto também será marcado como falhado. Qualquer um falhar, se alguém falhar , você pode ver, você pode ver isso na saída aqui. Então, qualquer um está falhando, e essa é a razão pela qual você está recebendo essa falha como saída Agora, se eu executar isso de novo, ok, deixe-me dizer isso. Você pode ver agora que todos os três foram executados com sucesso. Então, você está vendo tudo pronto como saída. Está bem? Da mesma forma, há mais um método, que diz, que é o método racial. Está bem? Então, agora haverá um cenário em que você deseja usar o resultado ou encontrar a primeira promessa estabelecida, certo Então, nesse caso, o que você pode fazer é dizer o ponto da promessa como e, como se você tivesse a matriz de promessas aqui, você pode fazer isso. OK. E você pode ter uma sintaxe similar Então, ao invés de usar tudo, você está usando raios aqui. É isso, ok? E você pode ver isso feito, ok. E aqui você pode ver a raça. Então, vou apenas mencionar uma série em todos os lugares para que saibamos que essa saída é de s. Ok. Vou guardar isso. Então você pode ver a toca enquanto isso é feito. Então esse foi executado aqui. Isso é da raça. OK. Assim, você pode ver uma promessa falhada, erro e até mesmo uma promessa falhando. Está bem? Então, sim, é assim que raios e promessas funcionam, ok. Essencialmente, a corrida lhe dará a promessa de força que resolve e tudo o ajudará a executar ou cumprir todas as promessas em paralelo OK. Então, essas são promessas, e espero que isso tenha ficado claro. Então, em poucas palavras, promessas fornecem uma maneira mais limpa e uma abordagem mais estruturada para lidar com uma operação síncrona, ok Então pegue e , finalmente, estão alguns dos métodos que você pode usar, ok? E esses são os métodos que ajudam você a trabalhar com promessas. 5. async/await: a maneira moderna de lidar com JavaScript assíncrono: Então, agora é hora de começarmos a falar sobre async await. Agora, async e await nos ajudam a simplificar ainda mais nosso código assíncrono Agora, aqui, eu tenho um exemplo já escrito em que eu tenho essa função, que está retornando uma promessa, ok? E dentro da promessa, estamos realmente tendo esse código assíncrono ou em que estou simulando um atraso aqui de 1.000 de E eu tenho uma taxa de sucesso aqui de 50% escolhida aleatoriamente, e elas podem ser sucesso ou fracasso aqui, ok? E eu estou fazendo uso disso dessa forma. Então, se uma promessa for resolvida, ela está sendo usada e, se não for, se houver um erro, usamos catch. Portanto, essa é a sintaxe ao trabalhar com promessas. Agora, o problema aqui é que isso ainda não é legível. A maneira como você está consumindo isso não é legível. E com a ajuda dessas duas palavras-chave, você pode simplificar ainda mais isso. Tudo bem? Então, deixe-me dar um exemplo, então vou comentar isso, ok? O que posso fazer é dizer que eu queira consumir isso, obter dados. Então, o que eu posso fazer é dizer função aqui, e eu vou dizer buscar dados ou buscar dados, vamos chamá-lo, e eu vou buscá-los de forma sincronizada Ok. Agora, aqui, o que posso dizer é que posso dizer deixar dados e posso dizer obter dados aqui. Ok. Então get data é o nome da nossa função aqui. Está bem? Então, eu também chamarei isso de get data em vez de fetch data. Está bem? Então, eu tenho as coisas dessa maneira agora, e deixe-me também adicionar essa declaração de log aqui, log de pontos do console, na qual estou imprimindo dados Agora, é claro, vamos ver qual é a saída aqui. Ok. Então, não estamos recebendo nada aqui. Está bem? Então, o que eu faria é chamar essa função. Ok, esqueci de chamar essa função resumidamente. Ok. Eu veria se isso. Ok, então você está recebendo uma promessa agora, ok? Você não está recebendo o resultado, ok? Como você obteria o resultado? Então, para obter o resultado usando as palavras-chave Async e await, você pode usar async dessa forma e adicionar await aqui Assim. Ok. E você obteria os dados agora, você pode ver? Tudo bem Portanto, esta é uma sintaxe, bastante legível e muito mais simples do que Tudo bem? Então, isso ainda não é legível, e isso simplifica ainda mais Está bem? Agora, uma pia e um peso dependem um do outro. Se você tentar remover um coletor e tentar salvar, verá que o Aweight só é válido em funções de coletor Então você precisa ter uma pia. Se você tentar remover await aqui e tentar salvá-lo, receberá uma promessa e verá que isso é um erro Está bem? Portanto, você precisa usar os dois aqui para obter a saída certa. E você pode até mesmo fazer o tratamento de erros aqui. Assim, você pode usar o tratamento de erros. Você pode fazer o tratamento de erros com a ajuda do simple try catch, e qualquer erro que esteja recebendo, você pode registrá-lo dessa forma, algo assim. E você pode mover esse código para dentro. Ok. E aqui você pode dizer, eu posso adicionar um erro. Algo parecido com isso. Ok. Agora, se houver uma falha aqui, você verá essa mensagem de erro. Está bem? Você pode ver erros e erros por algum motivo. Tudo bem Agora, a vantagem aqui da sintaxe é uma: ela é legível Está bem? E a vantagem é que você pode executar várias operações assíncronas em paralelo Está bem? Então eu posso ter mais um aqui. Ok. Então, vamos chamar isso como vamos chamar isso de um aqui. Está bem? Eu vou dizer que este é um. Ok. E essa coisa eu vou adicionar aqui. Eu vou dizer que são dois. Ok. E vou mudar rapidamente o nome da variável aqui. Eu direi que esse é o primeiro dado. Esses são os dados dois. Isso se torna dados um, dados dois, deixe-me salvar isso e vamos ver. Você pode ver que isso é um erro. Agora, uma promessa falhou, certo? Então isso foi executado. O resto do bloco não foi executado. Mas se eu executar isso de novo, você verá uma e a segunda promessa falhou. Uma foi executada, mas a segunda promessa falhou. Anteriormente, a primeira promessa havia falhado. Deixe-me salvar isso de novo. Você verá um e dois. Desta vez, ambos tiveram sucesso, certo? Você pode ter operações paralelas como essa e, como você pode ver aqui ou pode é muito simples de entender e a sintaxe também é fácil. Está bem? Não há nada complicado envolvido. Está bem? Assim, você pode ver o primeiro campo. Então, é claro, nada será executado nesse bloco, certo? Então, vou guardar isso novamente. Deixe-nos ver. Ok. Mas em vez disso, deixe-me ligar assim ou, aumente a taxa de sucesso para, digamos, 90%. Um, dois e três. Então eu aumento a taxa de sucesso, e você pode ver que todos os três foram bem-sucedidos, certo? Então é assim que funciona e, chegando à documentação, acho que o Await simplifica o código assíncrono, fazendo com que pareça um código síncrono fazendo Então, parece um código síncrono, Javascript normal, ok, mais fácil de ler e mais fácil de manter E mesmo para ser grande, isso é bem simples, certo? As pessoas podem facilmente entender o que está acontecendo, ok? Então, com a ajuda do Await, estamos dizendo que espere que essa operação seja concluída porque essa é uma operação assíncrona Então ele espera, ele termina isso, então ele espera que isso seja Eu termino isso, então ele espera que isso seja concluído. E como estamos usando await, temos que marcar essa função como um coletor aqui Está bem? Portanto, melhora a legibilidade e facilita o tratamento de erros com o Try Catch Então, aqui, você tinha que usar o cache, imediatamente, e pegar. Agora, aqui, é bem simples, como JavaScript padrão, tente armazenar em cache, ok E você pode usar o asyncad com várias operações síncronas, solicitações asyncad com várias operações síncronas, solicitações HTTP e muito mais. Tudo bem Então, tudo isso é possível, e é incrível. Como essas coisas estão sendo muito usadas, se você estiver verificando qualquer código JavaScript ou se estiver trabalhando muito com EPIs, o que, é claro, acontecerá já que está aprendendo JavaScript, ok, você verá muitas dessas duas palavras-chave Tudo bem Então, esses dois são importantes. exemplo, se você quiser avançar no Javas Crave, você quer usar coisas como react e tudo mais, tudo bem, esses Await and a sink algo que você deve entender Tudo bem? Então, espero que isso seja útil e espero que você tenha conseguido acompanhar. 6. Conclusão do curso: Bem, parabéns. Você concluiu o domínio do JavaScript assíncrono e espero que tenha aprendido muito durante toda essa Espero que você esteja se sentindo muito mais confiante em sua capacidade de lidar com operações assíncronas com a ajuda de conceitos como retornos de chamada, promessas E espero que este curso tenha lhe dado uma nova perspectiva de como você pode escrever código assíncrono baseado em JavaScript para lidar com operações como chamadas de banco de dados, chamadas de EPI e outras coisas Agora, aqui está uma rápida recapitulação do que aprendemos. Nós cobrimos os retornos de chamada. Aprendemos sobre promessas e aprendemos como você pode usar esse conceito moderno para escrever operações assíncronas em JavaScript E também aprendemos sobre o ANC e o await e entendemos como você pode usá-los. Agora, espero que este curso tenha proporcionado a você uma boa experiência prática, porque não fizemos uso de nenhuma apresentação Tudo era estritamente restrito no IDE. E eu sei que desenvolvedores como você sempre adoram ou preferem programar e ter o editor sempre aberto na frente deles, porque é isso que fornece a experiência prática real antes de você começar a trabalhar em projetos do mundo real. Agora, depois de terminar este curso, eu recomendo fortemente que você continue praticando e utilizando os conceitos que aprendeu ao longo dos projetos nos quais está trabalhando . Obrigado por ser um grupo de alunos tão engajado Este curso vem com um projeto de classe, que você pode encontrar na seção de projetos deste curso específico. Eu recomendo que você conclua o projeto e compartilhe com toda a turma para obter mais feedback. E com isso dito, chegamos ao fim e desejo a você tudo de bom para os projetos de JavaScript nos quais você trabalha.