JavaScript Async

"async and await make promises easier to write"

async Machen Sie die Funktion einen Promise zurückgeben

await Machen Sie die Funktion auf Promise warten

Async Syntax

Schlüsselwort vor der Funktion async Machen Sie die Funktion einen Promise zurückgeben:

Beispiel

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

Gleichwertig zu:

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

Hier sind Methoden zur Verwendung von Promise:

myFunction().then(
  function(value) { /* Erfolgscode */ },
  function(error) { /* Fehlerbehandlung */ }
);

Beispiel

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

Versuchen Sie es selbst

Oder noch einfacher, weil Sie normale Werte erwarten (normale Antwort, nicht Fehler):

Beispiel

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

Versuchen Sie es selbst

Await Syntax

Schlüsselwort vor der Funktion await Machen Sie die Funktion auf Promise warten:

let value = await promise;

await Schlüsselwörter können nur async In Funktionen verwendet.

Beispiel

Lassen Sie uns langsam lernen, wie man es verwendet.

Grundlegende Syntax

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

Versuchen Sie es selbst

Wartezeit

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

Versuchen Sie es selbst

Datei abwarten

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

Versuchen Sie es selbst

Browser-Unterstützung

ECMAScript 2017 hat den JavaScript-Schlüsselwort async und await.

Nachstehende Tabelle zeigt die erste vollständige Browser-Version, die beide unterstützt:

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Dezember 2016 April 2017 März 2017 September 2017 Dezember 2016