JavaScript asynchron
„async und await machen Versprechungen leichter zu schreiben“
async lässt eine Funktion ein Promise zurückgeben
await lässt eine Funktion auf ein Promise warten
Asynchrone Syntax
Das Schlüsselwort asyncvor 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);}
);
Oder einfacher, da Sie einen normalen Wert erwarten (eine normale Antwort, kein Fehler):
Beispiel
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Warten Sie auf die Syntax
Das Schlüsselwort awaitvor einer Funktion lässt die Funktion auf ein Promise warten:
let value = await promise;
Das awaitSchlüsselwort kann nur innerhalb einer
asyncFunktion verwendet werden.
Beispiel
Lassen Sie uns langsam vorgehen 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();
Die beiden Argumente (Resolve und Reject) sind von JavaScript vordefiniert.
Wir werden sie nicht erstellen, sondern eine davon aufrufen, wenn die Executor-Funktion bereit ist.
Sehr oft werden wir keine Ablehnungsfunktion benötigen.
Beispiel ohne Ablehnung
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Warten auf eine Zeitüberschreitung
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
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();
Browser-Unterstützung
ECMAScript 2017 führte die JavaScript-Schlüsselwörter
asyncund await.
Die folgende Tabelle definiert die erste Browserversion mit voller 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 |