async und await
Mit einer async-Funktion lassen sich asynchrone Schritte der Reihe nach lesen. await wartet innerhalb dieser Funktion auf ein Promise; die Seite und anderes JavaScript laufen weiter.
Was await pausiert
Bei await gibt die Funktion die Kontrolle vorübergehend an den Browser ab. Ereignisse können weiterlaufen. Nach der Erfüllung setzt die Funktion an derselben Stelle fort.
async liefert immer ein Promise
Auch ein zurückgegebener String wird in einem erfüllten Promise geliefert. Wirft die Funktion einen Fehler, wird das Promise abgelehnt.
Ergebnis nach await lesen
pour liefert ein Promise. serve schreibt zuerst waiting, wartet und erhält danach lida tea.
function pour(order) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (order === "") reject("no leaves");
else resolve(order + " tea");
}, 100);
});
}
async function serve() {
console.log("waiting");
let drink = await pour("lida");
console.log(drink);
}
serve();
Die Ausgaben sind waiting und danach lida tea. Beide stehen in serve, die zweite folgt erst nach der Erfüllung.
Der Aufrufer bekommt ein Promise
serve() ohne await liefert nicht sofort das Getränk.
async function serve() {
return "lida tea";
}
let ticket = serve();
console.log(ticket instanceof Promise);
Die Ausgabe ist true: ticket ist ein Promise. Sein Wert wird mit await in einer weiteren async-Funktion oder mit then gelesen.
Ablehnungen mit try und catch behandeln
Eine abgelehnte, erwartete Operation wirkt am await wie ein geworfener Fehler. Lege sie deshalb in try.
function pour(order) {
return order === ""
? Promise.reject("no leaves")
: Promise.resolve(order + " tea");
}
async function serveEmpty() {
try {
await pour("");
} catch (reason) {
console.log(reason);
}
}
serveEmpty();
Die Ausgabe ist no leaves. Auch spätere Fehler im selben try-Block gelangen zu diesem catch.
Der Rest der Seite läuft weiter
Nur die aktuelle async-Funktion wartet. Ihr Aufruf liefert sofort ein Promise, sodass synchroner Code danach fortgesetzt wird.
Vollständiges Browserbeispiel
Das Beispiel sammelt alle Schritte in einer async-Funktion. Ein kurzer Timer erfüllt das Promise, daher ist kein Server nötig.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(resolve => setTimeout(() => resolve(order + " tea"), 100));
}
async function serve() {
const cup = document.getElementById("cup");
const seen = ["waiting"];
cup.textContent = "waiting";
const drink = await pour("lida");
cup.textContent = drink;
seen.push(drink, "done");
document.getElementById("line").textContent = seen.join(" / ");
}
serve();
</script>
</body>
</html>
Am Ende steht waiting / lida tea / done. done wird erst nach dem erwarteten Wert ergänzt.
Übung
Ändere lida, warte auf das Ergebnis und übergib danach einen leeren String. catch sollte no leaves erhalten.
Häufige Fehler
Erwarte keinen fertigen String von einem async-Aufruf. Nutze await nicht in einer normalen Funktion und verwechsle das Warten nicht mit einem Seitenstillstand.
Merksatz
async liefert immer ein Promise. await pausiert nur diese Funktion bis zur Entscheidung des Promise. Fehler gehören in try/catch.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt