Angular 2
Angular RXJS Subjects und Observables mit API-Anforderungen
Suche…
Bemerkungen
API-Anforderungen mit dem Angular 2 HTTP-Dienst und RxJS zu machen, ist der Arbeit mit den Versprechen in Angular 1.x sehr ähnlich.
Verwenden Sie die Http- Klasse, um Anforderungen zu stellen. Die Http - Klasse stellt die Methoden zur Ausgabe von HTTP - Anforderungen GET , POST , PUT , DELETE , PATCH , HEAD - Anfragen über entsprechende Verfahren. Außerdem wird eine generische request für die Ausgabe von HTTP-Anforderungen jeglicher Art bereitgestellt.
Alle Methoden der Http Klasse geben eine Observable<Response> , auf die Sie RxJS-Operationen anwenden können. Sie rufen die .subscribe() -Methode auf und übergeben eine Funktion, die aufgerufen wird, wenn Daten im Observable-Stream zurückgegeben werden.
Der beobachtbare Datenstrom für eine Anforderung enthält nur einen Wert - die Response und wird abgeschlossen, wenn die HTTP-Anforderung erfolgreich abgeschlossen wurde, oder Fehler / Fehler, wenn ein Fehler ausgegeben wird.
Beachten Sie, dass die vom Http Modul zurückgegebenen Observables kalt sind. Wenn Sie also das Observable mehrmals abonnieren, wird die Ursprungsanforderung für jedes Abonnement einmal ausgeführt . Dies kann passieren, wenn Sie das Ergebnis in mehreren Komponenten Ihrer Anwendung verwenden möchten. Für GET-Anforderungen kann dies nur zu einigen zusätzlichen Anforderungen führen. Dies kann jedoch zu unerwarteten Ergebnissen führen, wenn PUT- oder POST-Anforderungen mehr als einmal abonniert werden.
Grundanforderung
Das folgende Beispiel veranschaulicht eine einfache HTTP-GET-Anforderung. http.get() gibt ein Observable das die Methode subscribe . Dieses fügt die zurückgegebenen Daten an das posts Array an.
var posts = []
getPosts(http: Http):void {
this.http.get(`https://jsonplaceholder.typicode.com/posts`)
.map(response => response.json())
.subscribe(post => posts.push(post));
}
API-Anforderungen kapseln
Es kann sinnvoll sein, die HTTP-Verarbeitungslogik in einer eigenen Klasse zu kapseln. Die folgende Klasse macht eine Methode zum Abrufen von Posts verfügbar. Es ruft die http.get() -Methode auf und ruft .map für das zurückgegebene Observable auf, um das Response Objekt in ein Post Objekt zu konvertieren.
import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";
@Injectable()
export class BlogApi {
constructor(private http: Http) {
}
getPost(id: number): Observable<Post> {
return this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
.map((response: Response) => {
const srcData = response.json();
return new Post(srcData)
});
}
}
Im vorherigen Beispiel wird eine Post Klasse verwendet, um die zurückgegebenen Daten aufzunehmen. Dies könnte folgendermaßen aussehen:
export class Post {
userId: number;
id: number;
title: string;
body: string;
constructor(src: any) {
this.userId = src && src.userId;
this.id = src && src.id;
this.title = src && src.title;
this.body = src && src.body;
}
}
Eine Komponente kann nun die Verwendung BlogApi Klasse einfach abrufen Post Daten , ohne sich selbst in Bezug auf die Funktionsweise der Http - Klasse.
Warten Sie auf mehrere Anfragen
Ein häufiges Szenario besteht darin, auf eine Reihe von Anforderungen zu warten, bevor Sie fortfahren. Dies kann mit der forkJoin Methode erreicht werden .
Im folgenden Beispiel werden mit forkJoin zwei Methoden aufgerufen, die Observables . Der in der .subscribe Methode angegebene Rückruf wird aufgerufen, wenn beide Observables abgeschlossen sind. Die von .subscribe angegebenen Parameter .subscribe mit der Reihenfolge überein, die im Aufruf von .forkJoin . In diesem Fall erste posts dann tags .
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}