Angular 2
Sujets et observables angulaires RXJS avec requêtes API
Recherche…
Remarques
Faire des requêtes API avec le service HTTP Angular 2 et RxJS est très similaire à travailler avec des promesses dans Angular 1.x.
Utilisez la classe Http pour faire des requêtes. La classe Http expose les méthodes d'émission des requêtes HTTP GET , POST , PUT , DELETE , PATCH , les requêtes HEAD via les méthodes correspondantes. Il expose également une méthode de request générique pour émettre tout type de requête HTTP.
Toutes les méthodes de la classe Http renvoient une Observable<Response> à laquelle vous pouvez appliquer des opérations RxJS . Vous appelez la méthode .subscribe() et transmettez une fonction à appeler lorsque des données sont renvoyées dans le flux Observable.
Le flux observable pour une requête ne contient qu'une seule valeur: la Response , et se termine / se règle lorsque la requête HTTP est terminée avec succès ou en cas d'erreur ou d'erreur en cas d'erreur.
Notez que les observables renvoyées par le module Http sont froides , ce qui signifie que si vous vous abonnez à l'observable plusieurs fois, la requête d'origine sera exécutée une fois pour chaque abonnement. Cela peut se produire si vous souhaitez consommer le résultat dans plusieurs composants de votre application. Pour les requêtes GET, cela peut provoquer des requêtes supplémentaires, mais cela peut créer des résultats inattendus si vous vous abonnez plus d'une fois à des requêtes PUT ou POST.
Demande de base
L'exemple suivant illustre une simple requête HTTP GET. http.get() renvoie un objet Observable auquel la méthode est subscribe . Celui-ci ajoute les données renvoyées au tableau des posts .
var posts = []
getPosts(http: Http):void {
this.http.get(`https://jsonplaceholder.typicode.com/posts`)
.map(response => response.json())
.subscribe(post => posts.push(post));
}
Encapsulation des requêtes API
Il peut être judicieux d’encapsuler la logique de gestion HTTP dans sa propre classe. La classe suivante expose une méthode pour obtenir des messages. Il appelle la méthode http.get() et appelle .map sur l' Observable renvoyé pour convertir l'objet Response objet 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'exemple précédent utilise une classe Post pour contenir les données renvoyées, qui peuvent ressembler à ceci:
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 composant peut maintenant utiliser la classe BlogApi pour récupérer facilement des données Post sans se préoccuper du fonctionnement de la classe Http .
Attendez plusieurs demandes
Un scénario courant consiste à attendre que plusieurs requêtes se terminent avant de continuer. Cela peut être accompli en utilisant la méthode forkJoin .
Dans l'exemple suivant, forkJoin est utilisé pour appeler deux méthodes qui renvoient des Observables . Le rappel spécifié dans la méthode .subscribe sera appelé lorsque les deux observables seront terminés. Les paramètres fournis par .subscribe correspondent à l'ordre donné dans l'appel à .forkJoin . Dans ce cas, posts abord posts tags .
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}