JavaScript Async

"async and await make promises easier to write"

async hacer que la función devuelva una promesa

await hacer que la función espere una promesa

sintaxis Async

palabra clave antes de la función async hacer que la función devuelva una promesa:

ejemplo

async function myFunction() {
  return "Hello";
}

equivalente a:

async function myFunction() {
  return Promise.resolve("Hello");
}

a continuación se muestra cómo usar Promise:

myFunction().then(
  function(value) { /* Código al éxito */ },
  function(error) { /* Código al fallar */ }
);

ejemplo

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Prueba personalmente

o más simple, porque espera un valor normal (respuesta normal, no error):

ejemplo

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);}
);

Prueba personalmente

sintaxis de Await

palabra clave antes de la función await hacer que la función espere la promesa:

let value = await promise;

await las palabras clave solo pueden estar async uso en función

ejemplo

vamos a aprender lentamente cómo usarla.

sintaxis básica

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Prueba personalmente

esperar tiempo de espera

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Prueba personalmente

esperar archivo

async function getFile() {
  let myPromise = new Promise(function(myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {myResolve(req.response);}
      else {myResolve("Archivo no encontrado");}
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
getFile();

Prueba personalmente

Compatibilidad del navegador

ECMAScript 2017 introdujo la palabra clave JavaScript async y await.

La siguiente tabla indica la versión del navegador que es el primer soporte completo para ambos:

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Diciembre de 2016 Abril de 2017 Marzo de 2017 Septiembre de 2017 Diciembre de 2016