JavaScript assíncrono
"async e await tornam as promessas mais fáceis de escrever"
async faz uma função retornar uma promessa
await faz uma função esperar por uma promessa
Sintaxe assíncrona
A palavra-chave asyncantes de uma função faz com que a função retorne uma promessa:
Exemplo
async function myFunction() {
return "Hello";
}
É o mesmo que:
function myFunction() {
return Promise.resolve("Hello");
}
Aqui está como usar a Promessa:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Exemplo
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Ou mais simples, já que você espera um valor normal (uma resposta normal, não um erro):
Exemplo
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Aguardar Sintaxe
A palavra-chave awaitantes de uma função faz com que a função espere por uma promessa:
let value = await promise;
A awaitpalavra-chave só pode ser usada dentro de uma
asyncfunção.
Exemplo
Vamos devagar e aprender a usá-lo.
Sintaxe Básica
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Os dois argumentos (resolver e rejeitar) são predefinidos pelo JavaScript.
Não vamos criá-los, mas chamar um deles quando a função executora estiver pronta.
Muitas vezes não precisaremos de uma função de rejeição.
Exemplo sem rejeição
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Esperando um tempo limite
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Aguardando um arquivo
async function getFile() {
let myPromise = new Promise(function(resolve) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
resolve("File not Found");
}
};
req.send();
});
document.getElementById("demo").innerHTML = await myPromise;
}
getFile();
Suporte ao navegador
ECMAScript 2017 introduziu as palavras-chave JavaScript
asynce await.
A tabela a seguir define a primeira versão do navegador com suporte total para ambos:
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |