Скачать или смотреть Effizientes Verketteten von HTTP-Anfragen in Angular Service-Dateien

Entdecken Sie, wie Sie HTTP-Anfragen in Angular elegant mit `mergeMap`, `concatMap` und `forkJoin` verketten können. Verbessern Sie Ihre Code-Struktur und sorgen Sie für einen reibungsloseren Datenfluss in Ihren Anwendungen.
---
Dieses Video basiert auf der Frage https://stackoverflow.com/q/62258315/ gestellt von dem Nutzer 'Andrew Howard' ( https://stackoverflow.com/u/1402073/ ) sowie auf der Antwort https://stackoverflow.com/a/62258580/ bereitgestellt von dem Nutzer 'Poul Kruijt' ( https://stackoverflow.com/u/3106920/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge.

Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: Chain http requests when using service file

Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/l...
Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ).

Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com.
---
Effizientes Verketteten von HTTP-Anfragen in Angular Service-Dateien

In Angular-Anwendungen ist es häufig erforderlich, mehrere HTTP-Anfragen zu stellen, besonders wenn Daten aus einer Anfrage für eine andere benötigt werden. Falls Sie bereits mehrfach hintereinander HTTP-Anfragen gemacht und sich dabei eine sauberere Lösung gewünscht haben, sind Sie nicht allein. Dieser Beitrag zeigt Ihnen, wie Sie HTTP-Anfragen in Angular verketten und das elegant in Ihren Service-Dateien handhaben können.

Das Problem

Angenommen, Sie möchten Daten von zwei verschiedenen Endpunkten in einer strukturierten Reihenfolge abrufen. Viele Online-Beispiele nutzen mergeMap, aber in Ihrem Kontext geht es möglicherweise um Service-Dateien, die eine Verkettungslösung erfordern. Schauen wir uns den originalen Code der Angular-Komponente an, die zwei HTTP-Anfragen nacheinander ausführt:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

In dieser Implementierung wartet getMatrixData() darauf, dass die erste Anfrage abgeschlossen ist, bevor die zweite Anfrage für die Grades ausgeführt wird. Diese Vorgehensweise funktioniert zwar, kann jedoch zu einem verschachtelten Ablauf führen und ist nicht sehr skalierbar. Glücklicherweise bietet Angular Werkzeuge, die diesen Prozess vereinfachen.

Die Lösung

Verwendung von concatMap

concatMap ist ideal, wenn sichergestellt werden soll, dass die zweite Anfrage erst startet, nachdem die erste abgeschlossen ist. So können Sie Ihren Code umstrukturieren:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Zusammenfassung zu concatMap

Es stellt sicher, dass das zweite Observable erst ausgeführt wird, wenn das erste abgeschlossen ist.

Verwenden Sie es, wenn die zweite Anfrage vom Ergebnis der ersten abhängt.

Alternative: forkJoin

Wenn die beiden Anfragen unabhängig voneinander sind und sich nicht gegenseitig benötigen, sollten Sie forkJoin in Betracht ziehen. Diese Funktion erlaubt es, mehrere Observables parallel auszuführen und wartet, bis alle abgeschlossen sind:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Zusammenfassung zu forkJoin

Verwenden Sie forkJoin, wenn mehrere Anfragen parallel ausgeführt werden können.

Es liefert das kombinierte Ergebnis aller Anfragen zurück, sobald alle abgeschlossen sind.

Beachten Sie, dass ein Fehler in einer Anfrage dazu führt, dass der gesamte forkJoin-Aufruf fehlschlägt.

Nutzung der async Pipe

Für eine elegantere Lösung können Sie die async Pipe von Angular nutzen. Diese reduziert den Bedarf an manuellen Subskriptionen und kümmert sich automatisch um Abmeldungen:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

In Ihrer Template-Datei verwenden Sie sie folgendermaßen:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Zusammenfassung zur async Pipe

Handhabt automatisch Subskriptionen und Abmeldungen.

Ideal für die Verwendung in Angular-Templates und sorgt für saubereren Code.

Die Verwendung von shareReplay(1) speichert den zuletzt ausgestrahlten Wert, was hilft, unnötige HTTP-Anfragen bei erneutem Abonnieren zu vermeiden.

Wichtige Hinweise

Beim Einsatz von forkJoin ist es wichtig, eventuelle Netzwerkfehler in Ihren Service-Methoden abzufangen:

Implementieren Sie catchError innerhalb Ihrer HTTP-Methoden.

Stellen Sie sicher, dass bei einem Fehler ein Fallback (z. B. eine leere Liste) zurückgegeben wird, um den Stream nicht zu unterbrechen.

Fazit

Durch den Einsatz von Operatoren wie concatMap und forkJoin zusammen mit der async Pipe von Angular können Sie eine bessere, robustere