Usando o Async / Await do JavaScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 49 Min 19 Seg Tempo restante da oferta: 15 49 19 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Usando o Async / Await do JavaScript [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Usando o Async / Await do JavaScript Conheça a funcionalidade async / await do JavaScript que nos ajuda a trabalhar com códigos assíncronos como se estivéssemos escrevendo de forma síncrona. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/usando-o-async-await-do-javascript.png) Olá, Web Developers! Vamos falar hoje sobre a possibilidade de criar funções assíncronas e como trabalhar com elas de forma bem simples com as novas instruções `async` e `await` do JavaScript. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) Vamos imaginar a seguinte situação: ```js function func1(number){ return new Promise(resolve =>{ setTimeout(() => resolve(77 + number) , 1000) }) } function func2(number){ return new Promise(resolve =>{ setTimeout(() => resolve(22 + number) , 1000) }) } function func3(number){ return new Promise(resolve =>{ setTimeout(() => resolve(14 * number) , 1000) }) } // Usando as funções func1(4) .then(number => { console.log('Hello'); return func2(number); }) .then(number => { console.log('World'); return func3(number); }) .then(result => console.log(result)) ``` Usar essas funções assíncronas com Promises nos poupam do *“Callback Hell”*, mas mesmo assim, precisamos passar uma função de Callback para cada `then()`. Com `async` e `await` podemos trabalhar com código assíncrono em um estilo mais parecido com o bom e velho código síncrono. Vamos reescrever o exemplo anterior, partindo da parte onde consumimos as nossas três funções assíncronas: ```js async function myAsyncFunction(){ var number = await func1(4); console.log('Hello'); number = await func2(number); console.log('World'); var result = await func3(number); console.log(result); } ``` Primeiro de tudo, temos o comando `async`. Ele faz com que uma função automaticamente retorne uma *Promise*. Então: ```js // retorna o número 5 function example1(){ return 5; } // retorna uma Promise com o valor 5 function example2(){ return Promise.resolve(5); } // faz exatamente o mesmo que a função "example2()" async function example3(){ return 5; } ``` Depois, dentro de `myAsyncFunction()`, veja que usamos o comando `await` antes de chamar as funções que retornam *Promises*: ```js async function myAsyncFunction(){ var number = await func1(4); ``` Veja que, ao invés de usar o `then()` com uma função de callback, nós simplesmente estamos jogando o retorno da função em uma variável, como fazemos com códigos síncronos. O comando `await` basicamente pausa a função `myAsyncFunction()` até que a Promise dentro da função `func1()` seja resolvida. Então o valor retornado é atribuído à variável e o código de `myAsyncFunction()` continua de onde parou. **Lembre-se:** o comando `await` só pode ser executado dentro de uma função marcada como `async`. Por isso que para executar as funções eu criei a função `myAsyncFunction()`. Como estamos falando de funções assíncronas, não pense que essa “pausa” que o `await` causa irá travar o seu código todo. Lembre-se que essa é só uma nova sintaxe para se trabalhar com *Promises*. Então, quando o `await` pausar a sua função, outras funções poderão estar sendo executadas. [ ![JavaScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos) ## Devo usar Async / Await ao invés de then()? Isso vai depender muito da situação. Muitos desenvolvedores vão pelo gosto, outros definem um padrão único a se seguir para o projeto e outros decidem o que é melhor para cada caso. Em meus projetos eu prefiro usar o que irá permitir uma melhor leitura e entendimento do código. No exemplo lá em cima, vimos um caso em que usar as funções com `await` deixou o código mais legível do que ficar criando vários `then()` (apesar de sempre atribuir o valor na mesma variável). Vamos a um exemplo em que o `then()` pode deixar nosso código mais legível: ```js function example1(){ return func1(4) .then(func2) .then(func3); } async function example2(){ var number = await func1(4); number = await func2(number); number = await func3(number); return number; } // ou async function example3(){ return func3(await func2(await func1(4))) } ``` O `example2()` e `example3()` usam o `async/await`. Veja que, nesse caso que só encadeamos funções, o uso do `then()` em `example1()` acaba sendo bem mais simples que `example2()` e mais legível que `example3()`. Sem contar que o comando `await` só funciona dentro de uma função `async`. Se estivermos dentro de uma função que não é `async`, teríamos que criar uma função async apenas para poder executar o comando `await`, enquanto as *Promises* podem ser usadas em qualquer lugar. ## Concluindo Async / Await aumentam as nossas possibilidades, mas também temos que analisar quando é o melhor momento para utilizá-los. Os navegadores modernos e o Node.js já dão um bom suporte para eles, então, aproveite (com moderação)! ;) [ ![JavaScript - Programação Assíncrona](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Programação Assíncrona Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-programacao-assincrona) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #NodeJS ](https://www.treinaweb.com.br/blog/tag/nodejs) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/javascript-generators-e-onde-usa-los-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Generators e onde usá-los ](https://www.treinaweb.com.br/blog/javascript-generators-e-onde-usa-los) Veja como e onde podemos aproveitar os Generators no JavaScript para melhorar o nosso código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/novos-recursos-do-ecmascript-2022-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Novos recursos do ECMAScript 2022 ](https://www.treinaweb.com.br/blog/novos-recursos-do-ecmascript-2022) Novos recursos do ECMAScript 2022 que é a décima terceira edição da especificação que vai padronizar tudo no mundo do JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Trabalhando com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-prisma-orm-e-nestjs) Neste artigo vamos aprender os primeiros passos para trabalhar com o Prisma ORM e o NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Inteligência-Artificial-Selecionando-Cores-400x280.png) [ Machine Learning ](https://www.treinaweb.com.br/blog/categoria/machine-learning) 7 anos atrás ## [ Desenvolva uma Inteligência Artificial que reconhece cores diretamente no navegador com TensorFlow.js ](https://www.treinaweb.com.br/blog/desenvolva-uma-inteligencia-artificial-que-reconhece-cores-diretamente-no-navegador-com-tensorflow-js) Aprenda a trabalhar com Machine Learning diretamente no navegador usando o TensorFlow.js Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/NODE-SQUELIZE-MYSQL-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Usando Sequelize ORM com Node e Express ](https://www.treinaweb.com.br/blog/usando-sequelize-orm-com-node-e-express) Vamos aprender a configurar uma aplicação com banco de dados MySQL usando Sequelize ORM com Node.js e Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/NEST-JS-COM-HANDLEBARS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ NestJS com template engine handlebars ](https://www.treinaweb.com.br/blog/nestjs-com-template-engine-handlebars) Neste artigo vamos aprender a configurar o NestJS com o handlebars, uma template engine que permite criarmos views dinâmicas e robustas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/14141423/node-vs-deno-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 7 anos atrás ## [ Deno: conheça o suposto substituto do Node.js ](https://www.treinaweb.com.br/blog/deno-conheca-o-suposto-substituto-do-node-js) Conheça o Deno, ambiente de execução de JavaScript desenvolvido pelo criador do Node.js e que pode substituí-lo num futuro próximo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/20234042/capa-dart-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 5 anos atrás ## [ Como utilizar generics no Dart ](https://www.treinaweb.com.br/blog/como-utilizar-generics-no-dart) Neste artigo vamos aprender sobre os Generics na linguagem Dart e como eles podem nos auxiliar em garantir que os tipos dos objetos sejam o que esperamos que eles sejam. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12132017/introducao-swoole-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Introdução ao Swoole, framework PHP assíncrono baseado em corrotinas ](https://www.treinaweb.com.br/blog/introducao-ao-swoole-framework-php-assincrono-baseado-em-corrotinas) Uma Introdução ao Swoole, framework PHP assíncrono baseado em corrotinas e comparação dele com o modelo tradicional que usa um servidor web (nginx, apache etc) com PHP-FPM. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Criando CRUD com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/criando-crud-com-prisma-orm-e-nestjs) Neste artigo vamos implementar um CRUD com Prisma ORM e NestJS, abordando as principais operações básicas com o banco de dados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Autenticação: Refresh Token com NestJS ](https://www.treinaweb.com.br/blog/autenticacao-refresh-token-com-nestjs) Neste artigo vamos continuar no assunto de autenticação, abordando a estratégia de refresh token com o NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/01/NOVIDADES-REACT-19-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 2 anos atrás ## [ 4 Novidades do React 19 ](https://www.treinaweb.com.br/blog/4-novidades-do-react-19) Descubra 4 novidades do React 19, incluindo novos hooks, otimizações de performance e uso prático das Actions para formulários. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 49min 19s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58