Umgang mit Mehreren Asynchronen Anfragen

In vielen realen Anwendungen müssen Sie möglicherweise mehrere asynchrone Aufgaben gleichzeitig ausführen oder entscheiden, welche zuerst abgeschlossen wird. JavaScript bietet zwei wichtige Methoden, um solche Szenarien zu handhaben: Promise.all() und Promise.race().

Promise.all(): Aufgaben parallel ausführen

Promise.all() ermöglicht es Ihnen, mehrere Versprechen parallel auszuführen. Es gibt ein einzelnes Versprechen zurück, das aufgelöst wird, wenn alle Versprechen im Array aufgelöst werden, oder es wird abgelehnt, sobald ein Versprechen abgelehnt wird. Dies ist nützlich, wenn Sie alle asynchronen Operationen erfolgreich abschließen müssen, bevor Sie fortfahren.

Die Funktion fetchMultipleResources sendet drei Anfragen gleichzeitig, um Daten zu einem Beitrag, einem Benutzer und Kommentaren abzurufen. Mit Promise.all() werden alle drei Anfragen zusammen initiiert, und die Funktion wartet, bis alle Versprechen erfüllt sind. Sobald sie erfüllt sind, werden die Ergebnisse in separate Variablen (post, user und comments) destrukturiert. Der Beitragstitel, der Benutzername und die Gesamtanzahl der Kommentare werden dann im HTML angezeigt. Dieser Ansatz ist effizient, wenn Sie alle Anfragen abgeschlossen haben müssen, bevor Sie fortfahren, da er die Gesamtwartezeit durch gleichzeitiges Ausführen der Aufgaben reduziert.

Promise.race(): Umgang mit dem ersten erfüllten Versprechen

Promise.race() gibt ein einzelnes Versprechen zurück, das erfüllt oder abgelehnt wird, sobald das erste Versprechen im Array abgeschlossen ist (entweder erfüllt oder abgelehnt). Dies ist nützlich, wenn Sie am schnellsten Ergebnis interessiert sind, z. B. um eine Anfrage abzubrechen, wenn sie 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 Versprechen. Wenn der Abruf innerhalb von 3 Sekunden abgeschlossen ist, wird der Beitragstitel angezeigt. Andernfalls, wenn der Abruf zu lange dauert, wird der Timeout ausgelöst und eine Fehlermeldung ("Request timed out!") im HTML angezeigt. Dieser Ansatz ist ideal für Situationen, in denen eine schnelle Antwort entscheidend ist.

Anwendungsfälle für parallele vs. sequentielle Anfragen

Wann parallele Anfragen verwenden (Promise.all())

Parallele Anfragen sind ideal, wenn Daten von mehreren unabhängigen Quellen abgerufen werden, da sie es ermöglichen, alle Anfragen gleichzeitig auszuführen. Zum Beispiel beim Laden von Benutzerdaten, Beiträgen und Kommentaren für ein Dashboard ist jede Anfrage separat und hängt nicht von den anderen ab, sodass sie parallel abgerufen werden können, um die Leistung zu verbessern. Dieser Ansatz minimiert die gesamte Wartezeit, da die Anfragen gleichzeitig und nicht nacheinander verarbeitet werden.

Wann sequentielle Anfragen verwenden

In einigen Fällen müssen Aufgaben in einer bestimmten Reihenfolge abgeschlossen werden, was bedeutet, dass eine abgeschlossen sein muss, bevor die nächste beginnen kann. Für diese abhängigen Anfragen können Sie async/await in einer Schleife oder .then()-Aufrufe in einer Kette verwenden und Promise.all() vermeiden.

Ein Beispiel wäre, zuerst Benutzerdaten abzurufen und dann mit der abgerufenen Benutzer-ID die Beiträge des Benutzers abzurufen. In solchen Szenarien hängt jede Anfrage von den Ergebnissen der vorherigen ab, was einen sequentiellen Ansatz erfordert.

Dieses Beispiel demonstriert das Erstellen von sequentiellen Anfragen, bei denen jede Anfrage vom Ergebnis der vorherigen abhängt. In fetchUserDataSequentially ruft die Funktion zuerst Benutzerdaten von der API ab. Sobald die Benutzerdaten empfangen und analysiert wurden, wird die Benutzer-ID in einer zweiten Anfrage verwendet, um die Beiträge des Benutzers abzurufen. Die Ergebnisse werden dann im HTML angezeigt, wobei der Name des Benutzers und die Anzahl der Beiträge angezeigt werden. Dieser sequentielle Ansatz ist notwendig, wenn Anfragen voneinander abhängig sind, um sicherzustellen, dass jede Anfrage abgeschlossen ist, bevor die nächste gestartet wird.