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.