O que é async await em JavaScript? Conheça as funções assíncronas

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

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!