Quiz: 9 JavaScript‑Promise‑Fragen
Versprechen nie wieder fallen lassen!
Kennst du JavaScript‑Promises?
- Beweise deine JavaScript‑Skills! 🚀
- Hinweise prüfen (großer Button, untere Ecke).
- Probiere den Code in der Browser‑Konsole aus (Tastenkürzel
F12oder Suche) oder nutze repl.it*. - Gerne kannst du mir auf Twitter @justsml schreiben. Ich freue mich auf dein Feedback!
👇 Löse die 9 Fragen unten 👇
Wie lautet die Ausgabe des folgenden Codes?
var p = new Promise((resolve, reject) => { reject(Error('The Fails!'))})p.catch(error => console.log(error.message))p.catch(error => console.log(error.message))Wir erstellen ein Promise mit der Konstruktor‑Methode und lösen sofort einen Fehler über den reject‑Callback aus.
Dann funktionieren die .catch‑Handler ähnlich wie .addEventListener(event, callback) im DOM oder .on(event, callback) beim Event Emitter, wobei mehrere Handler‑Callbacks hinzugefügt werden können. Jeder wird mit denselben Argumenten aufgerufen.
Wie lautet die Ausgabe für den folgenden Code?
var p = new Promise((resolve, reject) => { return Promise.reject(Error('The Fails!'))})p.catch(error => console.log(error.message))p.catch(error => console.log(error.message))Wenn du den Promise‑Konstruktor verwendest, musst du entweder die resolve()‑ oder die reject()‑Callbacks aufrufen. Der Promise‑Konstruktor ignoriert den Rückgabewert des Executors, sodass die zusätzlich mit Promise.reject() erstellte Promise nicht an p angehängt wird. Die beiden Handler werden an p angehängt, das im Pending‑Zustand bleibt, während die zurückgegebene abgelehnte Promise vom Host‑Umfeld als unbehandelt gemeldet wird.
Wie lautet die Ausgabe des folgenden Codes?
var p = new Promise((resolve, reject) => { reject(Error('The Fails!'))}).catch(error => console.log(error)).then(error => console.log(error))Beim Verketten von .then- und .catch-Aufrufen ist es hilfreich, sie als Reihe von Schritten zu betrachten. Jeder .then erhält den von dem vorherigen .then zurückgegebenen Wert (als Argument). Wenn jedoch dein „Schritt“ einen Fehler verursacht, werden alle nachfolgenden .then‑„Schritte“ übersprungen, bis ein .catch gefunden wird. Ein Catch-Handler behandelt die Ablehnung, indem er normal zurückkehrt: Selbst ein zurückgegebenes Error-Objekt erfüllt das nächste Promise mit diesem Objekt. Werfen oder die Rückgabe eines abgelehnten Promises hält die Kette abgelehnt. Bei einem zurückgegebenen Promise wird dessen späterer Zustand übernommen.
Wie lautet die Ausgabe für den folgenden Code?
var p = new Promise((resolve, reject) => { reject(Error('The Fails!'))}).catch(error => console.log(error.message)).catch(error => console.log(error.message))Beim Verketten von .catchs behandelt jeder nur Fehler, die in vorherigen .then‑ oder .catch‑„Schritten“ geworfen wurden. In diesem Beispiel gibt der erste .catch das console.log zurück, das nur über ein nach beiden .catchs hinzugefügtes .then() zugänglich ist.
Wie lautet die Ausgabe des folgenden Codes?
new Promise((resolve, reject) => { resolve('Success!') }) .then(() => { throw Error('Oh noes!') }) .catch(error => { return "actually, that worked" }) .catch(error => console.log(error.message))Hinweis: .catchs können verwendet werden, um Fehler zu ignorieren (oder zu überschreiben), indem einfach ein regulärer Wert zurückgegeben wird.
Der erste Catch erfüllt das zurückgegebene Promise mit dem String. Dafür ist kein späteres .then nötig; der zweite Catch wird übersprungen, weil die Kette bereits erfüllt ist. Keiner der ausgeführten Handler gibt etwas aus.
Wie lautet die Ausgabe für den folgenden Code?
Promise.resolve('Success!') .then(data => { return data.toUpperCase() }) .then(data => { console.log(data) })Hinweis: .thens geben Daten sequenziell weiter, vom return value zum nächsten .then(value => /* handle value */).
Ein return ist entscheidend, um einen Wert an den nächsten .then zu übergeben.
Wie lautet die Ausgabe des folgenden Codes?
Promise.resolve('Success!') .then(data => { return data.toUpperCase() }) .then(data => { console.log(data) return data }) .then(console.log)Es gibt 2 console.log‑Aufrufe, die ausgeführt werden.
Wie lautet die Ausgabe für den folgenden Code?
Promise.resolve('Success!') .then(data => { data.toUpperCase() }) .then(data => { console.log(data) })Hinweis: .then-Aufrufe geben Daten sequenziell weiter, von return value zum nächsten .then(value => /* handle value */).
Ein return ist entscheidend, um einen Wert an den nächsten .then zu übergeben.
Wie lautet die Ausgabe des folgenden Codes?
Promise.resolve('Success!') .then(() => { throw Error('Oh noes!') }) .catch(error => { return 'actually, that worked' }) .then(data => { throw Error('The fails!') }) .catch(error => console.log(error.message))Der erste .catch behandelt die Ablehnung, indem er einen String zurückgibt, ohne etwas auszugeben. Das nächste .then wirft Error('The fails!'), und der letzte .catch gibt nur dessen Nachricht aus: The fails!.
