Behandlung mehrerer HTTP-Anfragen in Angular mit RxJS

Blog

Behandlung mehrerer HTTP-Anfragen in Angular mit RxJS

Ein typisches Muster, auf das wir bei Single-Page-Apps stoßen, besteht darin, Daten von mehreren API-Endpunkten zu sammeln und die gesammelten Daten dann dem Benutzer anzuzeigen. Das Abrufen zahlreicher asynchroner Anfragen und deren Verwaltung kann schwierig sein, aber mit dem Http-Dienst von Angular und ein wenig Hilfe der mitgelieferten RxJS-Bibliothek kann dies in nur wenigen Codezeilen erreicht werden. Es gibt mehrere Möglichkeiten, mehrere Anfragen zu bearbeiten; sie können sequentiell oder parallel sein. In diesem Beitrag werden wir beides behandeln.



Beginnen wir mit einer einfachen HTTP-Anfrage mit dem Angular Http-Dienst.

import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: 'app/app.component.html' }) export class AppComponent { constructor(private http: HttpClient) { } ngOnInit() { this.http.get('/api/people/1').subscribe(json => console.log(json)); } }

In unserer App haben wir nur eine einzige Komponente, die den Http-Dienst von Angular über Dependency Injection einzieht. Angular gibt uns eine Instanz des Http-Dienstes, wenn es die Signatur im Konstruktor unserer Komponente sieht.



Da wir nun über den Dienst verfügen, rufen wir den Dienst auf, um einige Daten von unserer Test-API abzurufen. Wir tun dies im |_+_|. Dies ist ein Lebenszyklus-Hook, bei dem es ideal ist, um Daten abzurufen. Weitere Informationen zu |_+_|t finden Sie in den Dokumenten. Konzentrieren wir uns zunächst auf den HTTP-Aufruf. Wir können sehen, dass wir |_+_| . haben das macht eine GET-Anfrage an|_+_|. Wir rufen dann |_+_| um die Daten zu abonnieren, wenn sie zurückkommen. Wenn die Daten zurückkommen, protokollieren wir einfach die Antwort in der Konsole. Dies ist also das einfachste Code-Snippet, um eine einzelne Anfrage zu stellen. Sehen wir uns als nächstes zwei Anfragen an.

Abonnieren

In unserem nächsten Beispiel haben wir den folgenden Anwendungsfall: Wir müssen einen Charakter aus der Star Wars-API abrufen. Zu Beginn haben wir die ID des gewünschten Zeichens, das wir anfordern möchten.



Wenn wir den Charakter zurückbekommen, müssen wir die Heimatwelt dieses Charakters von derselben API, aber einem anderen REST-Endpunkt abrufen. Dieses Beispiel ist sequentiell. Stellen Sie eine Anfrage und dann die nächste.

Python für Finanzanalyse und algorithmischen Handel
ngOnInit

Wenn wir uns die Methode ngOnInit ansehen, sehen wir unsere HTTP-Anfragen. Zuerst bitten wir um einen Benutzer von |_+_|. Nach dem Laden stellen wir eine zweite Anfrage, um die Heimatwelt dieses bestimmten Charakters abzurufen. Sobald wir die Heimatwelt haben, fügen wir sie dem Charakterobjekt hinzu und setzen die |_+_| -Eigenschaft unserer Komponente, um sie in unserer Vorlage anzuzeigen. Das funktioniert, aber hier sind zwei Dinge zu beachten. Erstens sehen wir diese verschachtelte Pyramidenstruktur beim Verschachteln unserer Observables, die nicht sehr lesbar ist. Zweitens waren unsere beiden Anfragen nacheinander. Nehmen wir also an, unser Anwendungsfall ist, dass wir nur die Heimatwelt unseres Charakters abrufen möchten und um diese Daten zu erhalten, müssen wir den Charakter und dann die Heimatwelt laden. Wir können einen bestimmten Operator verwenden, um unseren obigen Code zu verdichten.

Karte zusammenführen

In diesem Beispiel verwenden wir |_+_| Operator. Schauen wir uns zuerst das Codebeispiel an.

ngOnIni

In diesem Beispiel verwenden wir |_+_| auch bekannt als |_+_| um die Observable-Werte abzubilden/zu iterieren. In unserem Beispiel erhalten wir also, wenn wir die Heimatwelt erhalten, ein Observable innerhalb unseres Charakter-Observable-Streams. Dadurch wird ein verschachteltes Observable in einem Observable erstellt. Die |_+_| Operator hilft uns, indem er den Wert aus dem inneren Observable abonniert und herauszieht und ihn an den übergeordneten Stream zurückgibt. Dies verdichtet unseren Code ziemlich und macht ein verschachteltes Abonnement überflüssig. Dies kann ein wenig Zeit in Anspruch nehmen, aber mit etwas Übung kann es ein praktisches Werkzeug in unserem RxJS-Werkzeuggürtel sein. Schauen wir uns als Nächstes mehrere parallele Anfragen mit RxJS an.

GabelJoin

Im nächsten Beispiel verwenden wir einen Operator namens|_+_|. Wenn Sie mit Promises vertraut sind, ist dies sehr ähnlich zu|_+_|. Die |_+_| Operator ermöglicht es uns, eine Liste von Observables zu nehmen und sie parallel auszuführen. Sobald jedes Observable in der Liste einen Wert ausgibt, wird das |_+_| gibt einen einzelnen Observable-Wert aus, der eine Liste aller aufgelösten Werte der Observables in der Liste enthält. In unserem Beispiel wollen wir einen Charakter und eine Charakter-Heimatwelt laden. Wir kennen bereits die IDs dieser Ressourcen, sodass wir sie parallel anfordern können.

http.get()

In unserem Beispiel erfassen wir den Charakter und den CharakterHomeworld Observable in Variablen. Observables sind faul, daher werden sie nicht ausgeführt, bis sich jemand abonniert hat. Wenn wir sie an forkJoin übergeben, abonniert der forkJoin-Operator jedes Observable und führt es aus, sammelt jeden ausgegebenen Wert und gibt schließlich einen einzelnen Array-Wert aus, der alle abgeschlossenen HTTP-Anforderungen enthält. Dies ist ein typisches Muster bei der JavaScript-UI-Programmierung. Mit RxJS ist dies im Vergleich zur Verwendung herkömmlicher Callbacks relativ einfach.

Mit den Operatoren mergeMap/flatMap und forkJoin können wir mit nur wenigen Codezeilen ziemlich anspruchsvollen asynchronen Code erstellen.

Danke fürs Lesen !

#eckig