Promises verketten und kombinieren

In der Webentwicklung müssen wir häufig asynchrone Aufgaben (z. B. das Abrufen von Daten) in einer bestimmten Reihenfolge ausführen. Mit dem Verketten von Promises können wir dies übersichtlich umsetzen.

Statt Callbacks zu verschachteln, was zu „Callback-Hell“ führen kann, verknüpfen wir die Vorgänge nacheinander. Dadurch wird unser Code wesentlich leichter lesbar und wartbar.

Die Methode .then() ist grundlegend für das Verketten. Wenn ein Deferred-Objekt (oder Promise) aufgelöst wird, wird sein .then()-Callback ausgeführt. Der Rückgabewert dieses Callbacks kann anschließend vom nächsten .then() in der Kette verwendet werden.

Gibt der Callback ein neues Deferred-Objekt zurück, wartet die Kette, bis dieses neue Deferred-Objekt aufgelöst wird, bevor sie fortgesetzt wird.

Sehen wir uns ein einfaches Beispiel an, in dem wir zwei asynchrone Schritte simulieren. Der zweite Schritt wird erst ausgeführt, nachdem der erste abgeschlossen ist, und verwendet die Daten aus dem ersten Schritt.

Beachten Sie, wie das Ergebnis von step1 ('Data from Step 1') an step2 übergeben wird.

Der von einem .then()-Callback zurückgegebene Wert bestimmt die Eingabe für das nächste .then().

• Wenn Sie einen Wert zurückgeben, der kein Deferred-Objekt ist, wird dieser Wert zum aufgelösten Wert für das nächste .then().
• Wenn Sie ein Deferred-Objekt zurückgeben, pausiert die Kette, bis dieses Deferred-Objekt aufgelöst wird. Sein aufgelöster Wert wird anschließend an das nächste .then() übergeben.

Obwohl .then() heute der Standard ist, bietet jQuery's .Deferred() auch .pipe(). Die Methode ähnelt .then(), wurde ursprünglich jedoch dafür entwickelt, aufgelöste oder abgelehnte Werte zu transformieren oder festzulegen, welches Deferred-Objekt die Kette fortsetzt.

Mit .pipe() können Sie ein neues Deferred-Objekt zurückgeben, das mit einem transformierten Wert aufgelöst wird. Der Wert wird dadurch effektiv an die nächste Stufe „weitergeleitet“.

Hier verwenden wir .pipe(), um das Ergebnis des ersten Vorgangs zu übernehmen, zu transformieren (z. B. in Großbuchstaben umzuwandeln) und anschließend den transformierten Wert an den abschließenden .done()-Handler zu übergeben.

Was ist, wenn Sie mehrere asynchrone Aufgaben haben, die unabhängig voneinander sind, Sie aber warten müssen, bis alle abgeschlossen sind, bevor Sie fortfahren? Genau dafür gibt es $.when().

$.when() nimmt ein oder mehrere Deferred-Objekte (oder Promises) als Argumente entgegen und gibt ein neues Deferred-Objekt zurück. Dieses neue Deferred-Objekt wird erst aufgelöst, wenn alle übergebenen Deferred-Objekte aufgelöst wurden.

In diesem Beispiel simulieren wir zwei unabhängige AJAX-Anfragen (fetchUser und fetchPosts). Mit $.when() warten wir, bis beide abgeschlossen sind, bevor wir die zusammengeführten Ergebnisse protokollieren.

Beachten Sie, dass sie parallel und nicht nacheinander ausgeführt werden.

Wenn das von $.when() zurückgegebene Deferred-Objekt aufgelöst wird, erhalten seine .done()- oder .then()-Callbacks die aufgelösten Werte jedes übergebenen Deferred-Objekts als separate Argumente – und zwar in der Reihenfolge, in der sie an $.when() übergeben wurden.

Dadurch lassen sich Daten aus mehreren Quellen einfach kombinieren und verarbeiten, sobald alle verfügbar sind.

Betrachten Sie den folgenden jQuery-Codeausschnitt:

let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();

dfd1.then(function(val) {
  return val + " World";
}).then(function(newVal) {
  console.log(newVal); // Line A
  return dfd2;
}).then(function() {
  console.log("Finished!"); // Line B
});

dfd1.resolve("Hello");
dfd2.resolve();

Welche Ausgabe wird LETZTENDLICH in der Konsole ausgegeben, und in welcher Reihenfolge?

Sie haben gelernt, wie Sie komplexe asynchrone Abläufe verwalten:

• Verketten mit .then(): Sequenziert Vorgänge und übergibt Ergebnisse von einer Stufe an die nächste.
• .pipe(): Eine ältere Methode zum Transformieren von Werten oder Zuordnen von Deferred-Objekten innerhalb einer Kette.
• Kombinieren mit $.when(): Wartet, bis mehrere unabhängige Deferred-Objekte parallel abgeschlossen sind, bevor die Ausführung fortgesetzt wird, und stellt ihre Ergebnisse als separate Argumente bereit.

Diese Muster sind entscheidend für robuste und gut lesbare asynchrone Anwendungen.