Neste tutorial, você aprenderá sobre as palavras-chave async / await do JavaScript com a ajuda de exemplos.
Você usa a asyncpalavra-chave com uma função para representar que a função é uma função assíncrona. A função assíncrona retorna uma promessa.
A sintaxe da asyncfunção é:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Aqui,
- nome - nome da função
- parâmetros - parâmetros que são passados para a função
Exemplo: função assíncrona
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Resultado
Função assíncrona.
No programa acima, a asyncpalavra-chave é usada antes da função para representar que a função é assíncrona.
Uma vez que esta função retorna uma promessa, você pode usar o método de encadeamento then()assim:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Resultado
Função assíncrona 1
No programa acima, a f()função é resolvida e o then()método é executado.
JavaScript aguarda palavra-chave
A awaitpalavra-chave é usada dentro da asyncfunção para aguardar a operação assíncrona.
A sintaxe para usar await é:
let result = await promise;
O uso de awaitpausa a função assíncrona até que a promessa retorne um valor de resultado (resolução ou rejeição). Por exemplo,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();
Resultado
Promessa resolvida olá
No programa acima, um Promiseobjeto é criado e resolvido após 4000 milissegundos. Aqui, a asyncFunc()função é escrita usando a asyncfunção.
A awaitpalavra-chave espera que a promessa seja concluída (resolver ou rejeitar).
let result = await promise;
Portanto, hello é exibido apenas após o valor da promessa estar disponível para a variável de resultado.
No programa acima, se awaitnão for usado, hello será exibido antes da promessa ser resolvida.
Trabalho de função assíncrona / espera
Nota : Você pode usar awaitapenas dentro das funções assíncronas.
A função assíncrona permite que o método assíncrono seja executado de forma aparentemente síncrona. Embora a operação seja assíncrona, parece que a operação é executada de maneira síncrona.
Isso pode ser útil se houver várias promessas no programa. Por exemplo,
let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )
No programa acima, awaitespera que cada promessa seja concluída.
Manipulação de erros
Ao usar a asyncfunção, você escreve o código de maneira síncrona. E você também pode usar o catch()método para detectar o erro. Por exemplo,
asyncFunc().catch( // catch error and do something )
A outra maneira de lidar com um erro é usando o try/catchbloco. Por exemplo,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved
No programa acima, usamos o try/catchbloco para tratar os erros. Se o programa for executado com sucesso, ele irá para o trybloco. E se o programa gerar um erro, ele irá para o catchbloco.
Para saber mais try/catchdetalhes, visite JavaScript JavaScript try / catch.
Benefícios do uso da função assíncrona
- O código é mais legível do que usar um retorno de chamada ou uma promessa.
- O tratamento de erros é mais simples.
- A depuração é mais fácil.
Observação : essas duas palavras-chave async/awaitforam introduzidas na versão mais recente do JavaScript (ES8). Alguns navegadores mais antigos podem não suportar o uso de async / await. Para saber mais, visite JavaScript async / await browser support.
