JavaScript Async


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

„Async und Wait machen Versprechen einfacher zu schreiben“

async sorgt dafür, dass eine Funktion ein Promise zurückgibt

await lässt eine Funktion auf ein Promise warten

Asynchrone Syntax

Das Schlüsselwort async vor einer Funktion bewirkt, dass die Funktion ein Versprechen zurückgibt:

Beispiel

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

Ist das gleiche wie:

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

So verwenden Sie das Versprechen:

myFunction().then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

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

myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);</script>

</body>
</html>

Oder einfacher, da Sie einen normalen Wert erwarten (eine normale Antwort, keinen Fehler):

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

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

myFunction().then(
  function(value) {myDisplayer(value);}
);
</script>

</body>
</html>

Warten Sie auf die Syntax

Das Schlüsselwort await kann nur innerhalb eines verwendet werden async-Funktion.

Das Schlüsselwort await bewirkt, dass die Funktion die Ausführung anhält und warte auf ein gelöstes Versprechen, bevor es weitergeht:

let value = await promise;


Beispiel

Gehen wir langsam vor und lernen, wie man es benutzt.

Grundlegende Syntax

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

 myDisplay();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve, reject) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

Die beiden Argumente (auflösen und ablehnen) sind von JavaScript vordefiniert.

Wir werden sie nicht erstellen, sondern eine davon aufrufen, wenn die Executor-Funktion bereit ist.

Sehr oft benötigen wir keine Ablehnungsfunktion.

Beispiel ohne Ausschuss

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

 myDisplay();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

Warten auf eine Auszeit

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

 myDisplay();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

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

myDisplay();
</script>

</body>
</html>

Warten auf eine Datei

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();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p id="demo"></p>

<script>
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();
</script>

</body>
</html>

Browser-Unterstützung

ECMAScript 2017 führte die JavaScript-Schlüsselwörter ein asynchron und warten.

Die folgende Tabelle definiert die erste Browserversion mit vollständiger Unterstützung für beide:

Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Dec, 2016 Apr, 2017 Mar, 2017 Sep, 2017 Dec, 2016