In vielen praxisnahen Anwendungen ist es erforderlich, mehrere asynchrone Aufgaben gleichzeitig auszuführen oder zu bestimmen, welche zuerst abgeschlossen wird. JavaScript stellt zwei zentrale Methoden zur Verfügung, um solche Szenarien zu handhaben: Promise.all() und Promise.race().

Promise.all(): Aufgaben parallel ausführen

Promise.all() ermöglicht das gleichzeitige Ausführen mehrerer Promises in Parallelität. Es gibt ein einzelnes Promise zurück, das aufgelöst wird, sobald alle Promises im Array erfüllt sind, oder abgelehnt wird, sobald eines der Promises abgelehnt wird. Dies ist nützlich, wenn alle asynchronen Operationen erfolgreich abgeschlossen sein müssen, bevor fortgefahren werden kann.

Die Funktion fetchMultipleResources sendet drei Anfragen gleichzeitig, um Daten zu einem Beitrag, einem Benutzer und Kommentaren abzurufen. Mit Promise.all() werden alle drei Anfragen gemeinsam gestartet, und die Funktion wartet, bis alle Promises erfüllt sind. Nach der Auflösung werden die Ergebnisse in separate Variablen (post, user und comments) destrukturiert. Der Beitragstitel, der Benutzername und die Gesamtanzahl der Kommentare werden anschließend im HTML angezeigt. Dieser Ansatz ist effizient, wenn alle Anfragen abgeschlossen sein müssen, bevor fortgefahren wird, da die Gesamtwartezeit durch parallele Ausführung der Aufgaben reduziert wird.

Promise.race(): Behandlung des zuerst erfüllten Promises

Promise.race() gibt ein einzelnes Promise zurück, das entweder erfüllt oder abgelehnt wird, sobald das erste Promise im Array abgeschlossen ist (entweder erfüllt oder abgelehnt). Dies ist nützlich, wenn das schnellste Ergebnis benötigt wird, beispielsweise um eine Anfrage abzubrechen, falls diese zu lange dauert.

Die Funktion fetchWithTimeout erstellt ein timeoutPromise, das nach 3 Sekunden abgelehnt wird und so einen Timeout simuliert. Gleichzeitig fordert ein fetchPromise Daten von einer API an. Mit Promise.race() wartet die Funktion auf das zuerst erfüllte Promise. Wenn der Fetch innerhalb von 3 Sekunden abgeschlossen wird, wird der Titel des Beitrags angezeigt. Andernfalls, wenn der Fetch zu lange dauert, wird der Timeout ausgelöst und eine Fehlermeldung ("Request timed out!") im HTML angezeigt. Dieser Ansatz eignet sich besonders für Situationen, in denen eine schnelle Reaktion entscheidend ist.

Anwendungsfälle für parallele vs. sequenzielle Anfragen

Wann parallele Anfragen verwenden (Promise.all())

Parallele Anfragen sind ideal, wenn Daten von mehreren unabhängigen Quellen abgerufen werden, da alle Anfragen gleichzeitig ausgeführt werden können. Beispielsweise beim Laden von Benutzerdaten, Beiträgen und Kommentaren für ein Dashboard ist jede Anfrage unabhängig und kann parallel abgerufen werden, um die Leistung zu verbessern. Dieser Ansatz minimiert die gesamte Wartezeit, da die Anfragen gleichzeitig und nicht nacheinander verarbeitet werden.

Wann sequenzielle Anfragen verwenden

In manchen Fällen müssen Aufgaben in einer bestimmten Reihenfolge abgeschlossen werden, sodass eine Aufgabe beendet sein muss, bevor die nächste beginnt. Für diese abhängigen Anfragen kann async/await in einer Schleife oder das Verketten von .then()-Aufrufen verwendet werden, wobei Promise.all() vermieden wird.

Ein Beispiel wäre, zunächst Benutzerdaten abzurufen und anschließend mit der erhaltenen Benutzer-ID die Beiträge des Benutzers zu laden. In solchen Szenarien ist jede Anfrage auf das Ergebnis der vorherigen angewiesen, was einen sequenziellen Ansatz erforderlich macht.

Dieses Beispiel zeigt, wie man sequenzielle Anfragen stellt, bei denen jede Anfrage vom Ergebnis der vorherigen abhängt. In fetchUserDataSequentially ruft die Funktion zunächst Benutzerdaten von der API ab. Sobald die Benutzerdaten empfangen und geparst wurden, wird die Benutzer-ID in einer zweiten Anfrage verwendet, um die Beiträge des Benutzers abzurufen. Die Ergebnisse werden anschließend im HTML angezeigt und zeigen den Namen des Benutzers sowie die Anzahl der Beiträge. Dieser sequenzielle Ansatz ist notwendig, wenn Anfragen voneinander abhängig sind, um sicherzustellen, dass jede Anfrage abgeschlossen ist, bevor die nächste gestartet wird.