Angular 2
Soggetti e osservabili angolari RXJS con richieste API
Ricerca…
Osservazioni
Fare richieste API con il servizio Http 2 di Angular e RxJS è molto simile a lavorare con le promesse in 1.x angolare.
Utilizzare la classe Http per effettuare richieste. La classe Http espone i metodi per l'emissione delle richieste HTTP GET , POST , PUT , DELETE , PATCH , HEAD richieste tramite i metodi corrispondenti. Espone anche un metodo di request generico per l'emissione di qualsiasi tipo di richiesta HTTP.
Tutti i metodi della classe Http restituiscono una Observable<Response> , a cui è possibile applicare le operazioni RxJS . Si chiama il metodo .subscribe() e si passa una funzione da chiamare quando i dati vengono restituiti nel flusso Observable.
Il flusso Observable per una richiesta contiene solo un valore - la Response , e completa / stabilisce quando la richiesta HTTP è completata con successo, o errori / errori se viene generato un errore.
Nota: gli osservabili restituiti dal modulo Http sono freddi , il che significa che se ti iscrivi più volte all'osservabile, la richiesta di origine verrà eseguita una volta per ogni sottoscrizione. Questo può accadere se si desidera consumare il risultato in più componenti della propria applicazione. Per le richieste GET questo potrebbe solo causare alcune richieste extra, ma questo può creare risultati imprevisti se si iscrive più di una volta a richieste PUT o POST.
Richiesta di base
L'esempio seguente mostra una semplice richiesta HTTP GET. http.get() restituisce un Observable che ha il metodo subscribe . Questo accoda i dati restituiti alla matrice dei posts .
var posts = []
getPosts(http: Http):void {
this.http.get(`https://jsonplaceholder.typicode.com/posts`)
.map(response => response.json())
.subscribe(post => posts.push(post));
}
Incapsulamento delle richieste API
Potrebbe essere una buona idea incapsulare la logica di gestione HTTP nella sua stessa classe. La seguente classe espone un metodo per ottenere i post. Chiama il metodo http.get() e chiama .map sul Observable restituito per convertire l'oggetto Response in un oggetto Post .
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)
});
}
}
L'esempio precedente utilizza una classe Post per contenere i dati restituiti, che potrebbero avere il seguente aspetto:
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;
}
}
Un componente ora può utilizzare la classe BlogApi per recuperare facilmente i dati del Post senza preoccuparsi dei meccanismi della classe Http .
Attendi più richieste
Uno scenario comune è quello di attendere il completamento di un certo numero di richieste prima di continuare. Questo può essere realizzato usando il metodo forkJoin .
Nell'esempio seguente, forkJoin viene utilizzato per chiamare due metodi che restituiscono Observables . Il callback specificato nel metodo .subscribe verrà chiamato quando entrambi gli osservabili sono completi. I parametri forniti da .subscribe corrispondono all'ordine dato nella chiamata a .forkJoin . In questo caso, i primi posts poi tags .
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}