Angular 2
Hoekige RXJS-onderwerpen en observables met API-aanvragen
Zoeken…
Opmerkingen
Het doen van API-aanvragen met Angular 2 Http-service en RxJS lijkt erg op het werken met beloften in Angular 1.x.
Gebruik de klasse Http om verzoeken in te dienen. De klasse Http onthult de methoden voor het afgeven van HTTP-aanvragen GET , POST , PUT , DELETE , PATCH , HEAD aanvragen via overeenkomstige methoden. Het onthult ook een generieke request voor het verzenden van elke vorm van HTTP-aanvraag.
Alle methoden van de klasse Http leveren een Observable<Response> , waarop u RxJS-bewerkingen kunt toepassen. U roept de methode .subscribe() en geeft een functie door die moet worden aangeroepen wanneer gegevens worden geretourneerd in de waarneembare stroom.
De waarneembare stream voor een aanvraag bevat slechts één waarde - de Response en wordt voltooid / geregeld wanneer de HTTP-aanvraag succesvol is voltooid, of fouten / fouten als er een fout wordt gegenereerd.
Let op, de waarnemingen die worden geretourneerd door de Http module zijn koud , wat betekent dat als u zich meerdere keren abonneert op de waarneembare, het oorspronkelijke verzoek voor elk abonnement eenmaal wordt uitgevoerd . Dit kan gebeuren als u het resultaat in meerdere componenten van uw toepassing wilt gebruiken. Voor GET-aanvragen kan dit gewoon wat extra aanvragen veroorzaken, maar dit kan onverwachte resultaten opleveren als u zich meer dan eens abonneert op PUT- of POST-aanvragen.
Basisverzoek
In het volgende voorbeeld wordt een eenvoudig HTTP GET-verzoek getoond. http.get() retourneert een Observable met de methode subscribe . Deze voegt de geretourneerde gegevens toe aan de posts .
var posts = []
getPosts(http: Http):void {
this.http.get(`https://jsonplaceholder.typicode.com/posts`)
.map(response => response.json())
.subscribe(post => posts.push(post));
}
API-aanvragen inkapselen
Het is misschien een goed idee om de HTTP-verwerkingslogica in zijn eigen klasse in te kapselen. De volgende klasse onthult een methode om berichten te krijgen. Het roept de http.get() methode en roept .map op de geretourneerde Observable naar het omzetten Response object naar een Post object.
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)
});
}
}
In het vorige voorbeeld wordt een Post klasse gebruikt om de geretourneerde gegevens te bewaren, die er als volgt kunnen uitzien:
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;
}
}
Een component kan nu de BlogApi klasse gebruiken om gemakkelijk Post gegevens op te halen zonder zich bezig te houden met de werking van de Http klasse.
Wacht op meerdere verzoeken
Een veel voorkomend scenario is wachten tot een aantal aanvragen is voltooid voordat u doorgaat. Dit kan worden bereikt met behulp van de forkJoin methode .
In het volgende voorbeeld forkJoin wordt gebruikt om twee methoden die terugkeren noemen Observables . De callback die is opgegeven in de .subscribe methode wordt aangeroepen wanneer beide Observables zijn voltooid. De parameters die door .subscribe worden geleverd, .subscribe overeen met de volgorde die is opgegeven in de aanroep naar .forkJoin . In dit geval eerst posts vervolgens tags .
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}