„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
Das Schlüsselwort async
vor einer Funktion bewirkt, dass die Funktion ein Versprechen zurückgibt:
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 */ }
);
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):
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>
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;
Gehen wir langsam vor und lernen, wie man es benutzt.
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.
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>
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>
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>
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 |