Angular 2
Angular RXJS Subjects and Observables with API-förfrågningar
Sök…
Anmärkningar
Att göra API-förfrågningar med Angular 2 Http-tjänst och RxJS liknar mycket att arbeta med löften i Angular 1.x.
Använd Http- klassen för att göra förfrågningar. Http-klassen avslöjar metoderna för att utfärda HTTP-förfrågningar GET , POST , PUT , DELETE , PATCH , HEAD förfrågningar via motsvarande metoder. Det visar också en generisk request för att utfärda någon form av HTTP-begäran.
Alla metoder i Http klassen returnerar en Observable<Response> , till vilken du kan tillämpa RxJS-operationer . Du kallar .subscribe() och skickar in en funktion som ska anropas när data returneras i den observerbara strömmen.
Den observerbara strömmen för en förfrågan innehåller endast ett värde - Response och slutförs / avslutas när HTTP-förfrågan har slutförts framgångsrikt eller fel / fel om ett fel kastas.
Observera att de observerbara objekt som returneras av Http modulen är kalla , vilket innebär att om du prenumererar på den observerbara flera gånger kommer den ursprungliga begäran att köras en gång för varje prenumeration. Detta kan hända om du vill konsumera resultatet i flera komponenter i din applikation. För GET-förfrågningar kan detta bara orsaka några extra förfrågningar, men det kan skapa oväntade resultat om du prenumererar mer än en gång på PUT- eller POST-förfrågningar.
Grundläggande begäran
Följande exempel visar en enkel HTTP GET-begäran. http.get() returnerar en Observable som har metoden subscribe . Den här lägger till de returnerade uppgifterna till posts array.
var posts = []
getPosts(http: Http):void {
this.http.get(`https://jsonplaceholder.typicode.com/posts`)
.map(response => response.json())
.subscribe(post => posts.push(post));
}
Kapsla in API-förfrågningar
Det kan vara en bra idé att kapsla in HTTP-hanteringslogiken i sin egen klass. Följande klass visar en metod för att få inlägg. Det anropar http.get() metod och uppmanar .map på den returnerade Observable att konvertera Response objektet till ett Post objekt.
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)
});
}
}
Det föregående exemplet använder en Post klass för att hålla tillbaka de returnerade uppgifterna, som kan se ut enligt följande:
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;
}
}
En komponent nu kan använda BlogApi klassen enkelt hämta Post data utan om sig med arbetet i Http klassen.
Vänta på flera förfrågningar
Ett vanligt scenario är att vänta på att ett antal förfrågningar slutförs innan du fortsätter. Detta kan uppnås med metoden forkJoin .
I följande exempel används forkJoin för att kalla två metoder som returnerar Observables . Den återuppringning som anges i .subscribe metoden kommer att .subscribe när båda observablerna är slutförda. Parametrarna som tillhandahålls av .subscribe matchar den ordning som anges i samtalet till .forkJoin . I detta fall tags första posts sedan.
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}