Async e await são extensões das promises. Caso você não conheça promises, acesse o artigo seguinte e realize a leitura antes de prosseguir com async e await: https://www.mundojs.com.br/2020/03/02/o-que-sao-e-como-criar-promises/.
Quando uma função assíncrona é chamada, ela retorna uma promise. Uma função assíncrona pode conter uma palavra-chave await, que pausa a execução da função e espera pela resolução da promise passada, retomando a execução após a resolução da promise e retornando o valor resolvido.
A proposta das funções async/await é simplificar o uso de promises. Assim como promises são similares a callbacks estruturados, as funções async/await são similares à junção de generators com promises.
async:
A palavra async antes de uma função significa que a função sempre retorna uma promise. Outros valores serão agrupados em uma promise resolvida automaticamente. Por exemplo, esta função async retorna uma promise resolved com a string “Ola Mundo”:
async function funcaoAsync() {
return 'Ola Mundo';
}
funcaoAsync().then(console.log);
E nós podemos retornar uma promise explicitamente, que retornaria a mesma coisa:
async function funcaoAsync(){
return Promise.resolve('Ola Mundo')
}
funcaoAsync().then(console.log);
Então, o async garante que a função retorne uma promise.
Mas há outra palavra-chave, chamada await, que funciona apenas dentro de funções assíncronas.
await:
A palavra-chave await faz com que a função espere até que a promise seja estabelecida e retorne o seu resultado. Confira neste exemplo o seu funcionamento:
async function funcaoAsyncAwait() {
// Criaremos uma promise que retornará a string
// "Promise concluída", após o tempo de 5 segundos.
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Promise concluída!"), 5000)
});
// Esta variavel resultado recebe o resultado da promise, após sua conclusão.
let resultado = await promise;
console.log(resultado);
}
funcaoAsyncAwait();
Nesta função, a execução “pausa” e somente retorna quando passa o tempo de execução da promise. Literalmente falando, o await aguarda a conclusão da promise para retornar o resultado! Então, você verá a string “Promise concluída” após 5 segundos de execução, que é o tempo que estabelecemos para a conclusão da promise.
Observação: Não podemos utilizar o await em função síncronas. Ele funciona somente em funções assíncronas, então, precisamos ter o async em nossa function.