Como criar uma async arrow function em JavaScript

Neste artigo você vai aprender a como criar uma async arrow function, veremos a sintaxe e como podemos utilizar este recurso

Fala programador(a), beleza? Bora aprender mais sobre funções assíncronas, arrow functions e também JavaScript!

Basicamente vamos precisar criar uma arrow function com a palavra async antecedendo ela

Como é feita a criação de funções assíncronas comuns

Podemos passar um ou mais argumentos, como também nenhum, fica a nossa critério

Veja a sintaxe da async arrow function:

const myFunction = async (a, b) => {
    await console.log(a + b)
    console.log("Fim!")
}

myFunction(1, 2) // 3, Fim!

No exemplo acima criamos uma função assíncrona simples, com a sintaxe de arrow

Note que passamos dois argumentos, porém isso é opcional, devendo ser considerado para a sua utilização no seu programa

O await pode ser utiliza normalmente, como em qualquer função async

E assim temos o nosso objetivo concluído!

Conclusão

No artigo de hoje você aprendeu a como desenvolver uma async arrow function em JS

Utilizamos basicamente a mesma sintaxe das async comuns, antecedendo a função pela palavra reservada async

E quando necessário, utilizando await dentro da função, quando precisamos aguardar por algo

Note que passar argumentos é opcional, as vezes não os necessitamos em funções, você pode fazer diferente do que foi abordado no exemplo

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!

Toda async arrow function devolve uma Promise:

Aqui tem um detalhe que pega muita gente de surpresa

Não importa o que você retorna lá dentro, se a função é async o retorno vira uma Promise

const soma = async (a, b) => a + b

console.log(soma(1, 2)) // Promise, e não 3

soma(1, 2).then(res => console.log(res)) // 3

Se liga na primeira linha: o console.log mostrou a Promise, não o valor

Pra pegar o valor você precisa de await ou de .then(), e é por isso que quase sempre a chamada de uma async acaba morando dentro de outra função async

Repare também que quando o corpo é de uma linha só dá pra cortar as chaves e o return, fica bem mais limpo, né? 🙂

Usando o await pra valer: esperando algo que demora

No exemplo lá de cima o await aparece só pra mostrar a sintaxe

Mas o await só faz sentido de verdade quando existe algo demorado pra esperar

Vamos criar uma espera na mão pra você ver acontecendo:

const espera = (ms) => new Promise(resolve => setTimeout(resolve, ms))

const rodar = async () => {
console.log("começou")

await espera(2000)

console.log("passei 2 segundos esperando")
}

rodar()

O que o await faz é pausar SÓ o corpo dessa função até a Promise resolver, o resto do programa continua rodando normalmente

É como pedir um café e continuar respondendo email enquanto o café não chega

Bora ver na prática? Roda esse código e olha o intervalo entre as duas mensagens 😀

E se der erro dentro da função? try/catch:

Tome cuidado com isso: quando algo falha dentro de uma async, a Promise é rejeitada

Se você não tratar, o erro fica solto por aí e o programa se comporta de um jeito estranho

O jeito mais direto é o try/catch dentro da própria arrow function:

const buscarDados = async (id) => {
try {
const dados = await algoQuePodeFalhar(id)

return dados
} catch (erro) {
console.log("deu ruim:", erro)

return null
}
}

Tem também a versão de fora, tratando na hora de chamar:

buscarDados(1)
.then(res => console.log(res))
.catch(erro => console.log("deu ruim:", erro))

Os dois funcionam, a escolha é sobre quem deve saber do erro: a função ou quem chamou ela

Async arrow function dentro de callback: o erro clássico

Hoje boa parte do código que a gente escreve (e boa parte do que a IA gera pra gente) tem async arrow function jogada dentro de callback

E tem uma armadilha muito comum aqui

O forEach NÃO espera a sua função assíncrona terminar:

ids.forEach(async (id) => {
await espera(1000)
console.log(id)
})

console.log("acabou?") // aparece ANTES dos ids

O forEach dispara as três e segue a vida, por isso o "acabou?" chega primeiro

Quando você precisa esperar tudo, o caminho é map com Promise.all:

const rodar = async () => {

await Promise.all(ids.map(async (id) => {
await espera(1000)
console.log(id)
}))

console.log("agora sim acabou")
}

O map devolve um array de Promises e o Promise.all espera todas, aí sim a ordem faz sentido

E se você precisa que rode uma de cada vez, na ordem, usa um for…of dentro da async com await no meio

Arrow function ou function comum no async? Quando muda:

A sintaxe você já viu que é praticamente igual

Porém arrow function não é só "function escrita curtinho", ela tem comportamento próprio, e isso vale também na versão async

A arrow não tem this próprio: ela pega o this de onde foi criada

Dentro de uma classe ou de um callback, isso normalmente é o que você quer, e é justamente o motivo dela ter virado padrão em callback

A arrow também não pode ser chamada com new e não tem o objeto arguments

Então a regra prática fica assim:

callback, função curta e função que vive dentro de outra função: async arrow function

função que precisa de this dinâmico ou que vai ser usada como construtora: function comum

Simples assim, sem mistério