Async await em JavaScript: o que é e como usar na prática (com exemplos)

Neste artigo você vai aprender tudo sobre async await em JavaScript, como utilizar e tirar o melhor proveito deste recurso sensacional

Fala programador(a), beleza? Bora aprender mais sobre a funcionalidade de JavaScript para criar funções assíncronas!

Acompanhe o conteúdo por vídeo:

O que são funções assíncronas em JavaScript?

Primeiramente é importante entender como são constituídas as async functions

O que muita gente não sabe é que os retornos são baseados em Promises, recebemos o retorno tanto se forem executadas como também se forem rejeitadas

Baseado nisso, podemos entender que as funções assíncronas são uma espécie de Promise, pois condicionam a sua execução na espera de alguns retornos, onde utilizamos a expressão await

E na maioria dos casos uma Promise pode ser simplificada por uma função com async e await

Por isso é super importante entender o que é uma Promise e também o que é async await de JavaScript

Sintaxe da função assíncrona

A função assíncrona tem menos recursos que as Promises, aqui precisamos nos atentar basicamente a dois detalhes

Toda função que vai utilizar o recurso precisa iniciar com async

E onde necessitamos esperar por alguma resposta que eventualmente demorará mais que a execução do código, precisamos utilizar a expressão await

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Um exemplo: uma inserção de dados no banco pode demorar um pouco, então para receber uma resposta positiva antes de tomar outra ação condicionamos a inserção em uma função assíncrona

Assim é possível esperar todo o processo do banco de dados finalizar para darmos andamento ao nosso sistema

Veja um exemplo de sintaxe:

function primeiraFuncao() {
	console.log("Esperou isso")
}

async function segundaFuncao() {

	console.log("Iniciou")

	await primeiraFuncao()
  
  console.log("Agora executou isso!")

}

segundaFuncao()

Veja que a função primeiraFuncao não precisa ser assíncrona para utilizarmos ela dentro de uma assíncrona

Mas estamos esperando o seu resultado dentro da segundaFuncao

Quando há a execução dela, a última linha só vai rodar quando a resposta da primeiraFuncao for entregue

Então teremos a ordem:

"Iniciou"
"Esperou isso"
"Agora executou isso!"

Se você conseguiu entender este exemplo, você sabe como utilizar as funções assíncronas e seus recursos de async e await em JS!

Erros de função assíncrona

Um erro comum ao utilizar async e await é não definir a função com async e utilizar o await na função

Isso vai gerar um erro com a seguinte mensagem:

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

Então quando isso acontecer lembre-se de declarar a sua função com async, é como resolvemos este problema

E outra ponto interessante é que podemos tornar static methods e até funções anônimas assíncronas

Basta declarar async antes dos parâmetros

Algo prático com funções assíncronas

O exemplo acima foi útil para entender os recursos que formam o async e await, mas como vamos utilizá-lo na prática?

É simples exemplificar uma situação, podemos fazer uma requisição em uma API e esperar a resposta para depois seguir com a execução da função

Veja o exemplo:

function getUser(id) {
	return fetch(`https://reqres.in/api/users?id=${id}`)
  	.then(data => data.json())
    .catch(err => console.log(err))
}

async function showUserName(id) {

	const user = await getUser(id)
  
  console.log(`O nome do usuário é ${user.data.first_name}`)  

}

showUserName(1) // O nome do usuário é George

No exemplo acima temos uma requisição para uma API utilizando o Fetch API

Como você deve saber, esta requisição não é instantânea, ou seja, de alguma maneira temos que esperar os dados retornarem do servidor da API

Então vem um caso perfeito para o async e await

Utilizamos a função showUserName como async, para utilizar o await na espera da resposta da API

E isso faz com que a função só termine sua execução quando os dados chegam, fazendo com que ela seja executada com perfeição

Como tratar erros em async e await?

Nas Promises temos o método catch para tratar erros, o que é uma mão na roda

Em async e await precisaremos utilizar o bloco try catch, que é um recurso para tratamento de erros de JS

Veja a função anterior com o tratamento adicionado:

function getUser(id) {
	return fetch(`https://reqres.in/api/users?id=${id}`)
  	.then(data => data.json())
    .catch(err => console.log(err))
}

async function showUserName(id) {
	
  try {
  
    const user = await getUser(id)

    console.log(`O nome do usuário é ${user.data.first_name}`)  

	} catch(err) {
  
  	console.log(`Erro: ${err}`)
    
  }

}

showUserName(1) // O nome do usuário é George

Agora sim! Se houve algum erro na chamada da API conseguiremos tratar de alguma forma

Exibindo uma outra mensagem para o usuário, por exemplo

Pois temos a possibilidade de executar alguma lógica de nossa preferência no bloco catch

Conclusão

Neste artigo você aprendeu tudo sobre funções assíncronas e também o que é async await, recursos base das funções assíncronas

Temos que elas são como Promises, só que com sintaxe mais reduzida, o que é chamado de syntax sugar

Com a função assíncrona podemos esperar algum recurso que está executando em paralelo, para garantir uma execução plena do sistema

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Async e await com AJAX (requisições):

Se você já ouviu falar em AJAX, se liga: uma requisição com Fetch API é justamente uma forma moderna de fazer AJAX

AJAX nada mais é do que buscar dados no servidor sem recarregar a página, e o async e await caem como uma luva aqui

Antigamente esse trampo era feito com XMLHttpRequest ou com o famoso $.ajax do jQuery, cheio de callback aninhado

Com async e await a gente espera a resposta da requisição de um jeito muito mais limpo, quase como se o código fosse síncrono

Ou seja, é o mesmo conceito de AJAX de sempre, só que com uma leitura bem mais tranquila 🙂

Async await vs .then: qual a diferença?

Como comentamos, o async e await é um syntax sugar por cima das Promises

Na prática, tudo que você faz com .then também dá pra fazer com await, o que muda é o jeito de escrever

Com .then você encadeia os retornos, e isso vira aquela escada de callback quando tem muita coisa

Já com o await você lê de cima pra baixo, linha por linha, como se fosse código comum

Repara a mesma ideia dos dois jeitos:

// Com .then function showUserName(id) { getUser(id).then(user => { console.log(O nome do usuário é ${user.data.first_name}) }) }

// Com async e await async function showUserName(id) { const user = await getUser(id) console.log(O nome do usuário é ${user.data.first_name}) }

A escolha fica por sua conta, mas na maioria dos casos o await deixa o código bem mais legível

Perguntas frequentes sobre async await:

Dá pra usar await sem async? Não, e é o erro mais comum de todos: o await só é válido dentro de uma função marcada como async, senão o JavaScript reclama na hora

Preciso saber Promises antes de aprender async await? Ajuda muito, porque por baixo dos panos o async e await são Promises, então entender uma coisa deixa a outra bem mais fácil de digerir

Posso usar async em arrow functions? Pode sim, basta declarar o async antes dos parâmetros, o mesmo vale pra funções anônimas e métodos