JavaScript Async

"async en await maken promises gemakkelijker te schrijven"

async Maak functie return Promise

await Maak functie wachten op Promise

Async syntaxis

Voor de functie async Maak functie return promise:

Voorbeeld

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

Gelijkwaardig aan:

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

Hier zijn de methoden voor het gebruik van Promise:

myFunction().then(
  function(value) { /* Code bij succes */ },
  function(error) { /* Code bij fout */ }
);

Voorbeeld

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

Probeer het zelf uit

Of nog eenvoudiger, omdat je een normale waarde verwacht (normale respons, niet een fout):

Voorbeeld

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

Probeer het zelf uit

Await syntaxis

Voor de functie await Maak functie wachten op promise:

let value = await promise;

await Slechts in async Gebruik in functie

Voorbeeld

Laten we langzaam leren hoe we het kunnen gebruiken.

Basis语法

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve("Ik hou van je !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Probeer het zelf uit

Wachten op timeout

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("Ik hou van je !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Probeer het zelf uit

Wachten op bestand

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("Bestand niet gevonden");}
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
getFile();

Probeer het zelf uit

Browserondersteuning

ECMAScript 2017 introduceerde de JavaScript-sleutelwoord async en await.

De tabel hieronder vermeldt de eerste browserversies die beide volledig ondersteunen:

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
December 2016 April 2017 Maart 2017 September 2017 December 2016