Promises
Die Tasse ist ein Absatz, #cup. Sie beginnt als blank, und das Skript setzt sie auf waiting, bevor es Tee verlangt.
pour gibt das Getränk nicht zurück. Es gibt ein Promise zurück. Mit then bittest du dieses Promise, das Getränk später zu schreiben. Die Zeile unter pour sagt noch waiting. Die Zeile lautet waiting / lida tea.
Nicht die Tasse von eben
Die vorige Seite gab done an serve. serve rief die Funktion auf, bevor es zurückkehrte, also war das Log darunter schon lida tea / poured. Dort wartete nichts.
Hier läuft die Funktion, die du then gibst, nicht in der nächsten Zeile. pour kehrt zuerst zurück. Das Getränk erscheint, nachdem dieses Skript fertig ist.
Drei Zustände
Ein Promise ist pending, bis es sich entscheidet. resolve erfüllt es mit einem Wert. reject lehnt es mit einem Grund ab. then läuft nur bei Erfüllung. catch läuft nur bei Ablehnung. Diese Seite hat keinen Timer. Der Executor ruft resolve oder reject sofort auf, und die Handler warten trotzdem bis zum Ende des Skripts.
📊 Drei Zustände
| Zustand | Was du siehst | Leicht zu verwechseln |
|---|---|---|
| pending | die Tasse sagt noch waiting | das Getränk steht schon auf der Tasse |
| fulfilled | then erhält lida tea | catch läuft ebenfalls |
| rejected | catch erhält no leaves | then erhält das Getränk |
Der Executor ist jetzt, der Handler nicht
Die Funktion, die du new Promise gibst, läuft sofort. Darum kann resolve("lida tea") passieren, bevor pour zurückkehrt. Die Funktion für then ist anders. Sie wird eingereiht. Die Zeile nach pour(...) läuft, während die Tasse waiting sagt.
Die nächste Zeile wartet noch
pour("lida") speichert ein Promise in order. Die Tasse wurde auf waiting gesetzt. Das Log ist dieses Wort, nicht das Getränk.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
cup.textContent = "waiting";
let order = pour("lida");
console.log(cup.textContent);
Das Log ist waiting. order ist das Promise. Es ist nicht die Zeichenkette lida tea.
then erhält das Getränk
Rufe then mit einer Funktion auf. Diese Funktion bekommt den Wert, der an resolve ging. Sie schreibt das Getränk und loggt es. Dieses Log ist nicht das der nächsten Zeile. Es ist das Log in then.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
pour("lida").then(function (drink) {
cup.textContent = drink;
console.log(cup.textContent);
});
Das Log ist lida tea. Eine leere Zeichenkette erreicht diesen Handler nicht.
Keine Teeblätter
pour("") ruft reject("no leaves") auf und kehrt zurück. catch erhält diesen Grund. then läuft nicht.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
pour("").catch(function (reason) {
console.log(reason);
});
Das Log ist no leaves.
Das Promise ist nicht das Getränk
order.then ist eine Funktion. Daran erkennst du, dass order ein Promise ist und nicht die gewünschte Zeichenkette. Ein Vergleich des Promise mit "lida tea" wäre falsch, und dieses Stück druckt nur den Typ von then.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let order = pour("lida");
console.log(typeof order.then);
Das Log ist function.
Die Zeile unter der Tasse
Das Skript setzt die Tasse auf waiting und schiebt dieses Wort sofort. then schiebt lida tea und fügt die zwei Wörter zusammen. Das Zusammenfügen steht in then, also nach dem Skript, nicht in der nächsten Zeile.
<!DOCTYPE html>
<html>
<head>
<title>promised-cup — page</title>
</head>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
let seen = [];
cup.textContent = "waiting";
seen.push(cup.textContent);
pour("lida").then(function (drink) {
seen.push(drink);
cup.textContent = drink;
document.getElementById("line").textContent = seen.join(" / ");
});
</script>
</body>
</html>
Die Zeile lautet waiting / lida tea. Waiting war sofort da. lida tea kam in then. Das Wort blank ist weg. lida tea / poured ist die vorige Seite.
An der Theke
- Setze die Tasse auf waiting, rufe
pour("lida")auf und logge die Tasse sofort. Das Log ist waiting. - Setze das Getränk in
thenauf die Tasse. Dieses Log ist lida tea. - Rufe
pour("")auf und fange den Grund mitcatch. Das Log ist no leaves. - Lies
typeof order.then. Das Log ist function. - Lies die Zeile der Seite: waiting / lida tea.
Fehler an der Theke
Die Tasse sagt waiting, bis then läuft. Sie sagt nicht poured.
- Erwarten, dass das Log unter
pourlida tea ist - Den Rückgabewert für die Getränk-Zeichenkette halten
thenfür eine leere Bestellung nehmen und no leaves verpassencatchfür lida nehmen und no leaves erwarten- Die Zeile als lida tea / poured lesen
Das behalten
pourgibt ein Promise zurück, nicht die Zeichenkette lida tea- Die nächste Zeile loggt immer noch waiting
thenerhält lida tea nach diesem Skript- Eine leere Bestellung wird mit no leaves abgelehnt, und
catchloggt das - Die Zeile der Seite lautet waiting / lida tea
🧠 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