JavaScript asíncrono
"async y await hacen que las promesas sean más fáciles de escribir"
async hace que una función devuelva una promesa
await hace que una función espere una Promesa
Sintaxis asíncrona
La palabra clave asyncantes de una función hace que la función devuelva una promesa:
Ejemplo
async function myFunction() {
return "Hello";
}
Es lo mismo que:
function myFunction() {
return Promise.resolve("Hello");
}
Aquí está cómo usar la Promesa:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Ejemplo
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
O más simple, ya que espera un valor normal (una respuesta normal, no un error):
Ejemplo
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Sintaxis de espera
La palabra clave awaitantes de una función hace que la función espere una promesa:
let value = await promise;
La awaitpalabra clave solo se puede usar dentro de una
asyncfunción.
Ejemplo
Vayamos despacio y aprendamos a usarlo.
Sintaxis básica
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Los dos argumentos (resolver y rechazar) están predefinidos por JavaScript.
No los crearemos, pero llamaremos a uno de ellos cuando la función ejecutora esté lista.
Muy a menudo no necesitaremos una función de rechazo.
Ejemplo sin rechazo
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Esperando un tiempo de espera
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Esperando un archivo
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();
Compatibilidad con navegador
ECMAScript 2017 introdujo las palabras clave de JavaScript
asyncy await.
La siguiente tabla define la primera versión del navegador con soporte completo para ambos:
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |