JavaScript Async

"async og await gør promises lettere at skrive"

async gør funktionen returnere Promise

await gør funktionen vente på Promise

Async syntaks

nøgleord før funktionen async gør funktionen returnere promise:

eksempel

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

ligner:

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

Her er metoder til brug af Promise:

myFunction().then(
  function(value) { /* Kode, der udføres ved succes */ },
  function(error) { /* Kode, der udføres ved fejl */ }
);

eksempel

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

Prøv det selv

eller endnu mere simpelt, fordi du forventer en normal værdi (normal respons, ikke fejl):

eksempel

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

Prøv det selv

Await syntaks

nøgleord før funktionen await gør funktionen vente på promise:

let value = await promise;

await nøgleord kan kun bruges async brug i funktioner.

eksempel

lad os langsomt lære, hvordan vi bruger det.

grundlæggende syntaks

async function myDisplay() {
  lad os oprette en Promise(function(myResolve, myReject) {
    myResolve("Jeg elsker dig !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Prøv det selv

vent på timeout

async function myDisplay() {
  lad os oprette en Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("Jeg elsker dig !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Prøv det selv

vent på fil

async function getFile() {
  lad os oprette en Promise(function(myResolve, myReject) {
    lad os oprette en XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {myResolve(req.response);}
      else {myResolve("Fil ikke fundet");}
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
getFile();

Prøv det selv

Browser-understøttelse

ECMAScript 2017 har introduceret JavaScript-nøgleord async og await.

Følgende tabel angiver den første browserversion, der fuldt ud understøtter begge:

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