Angular 2
Obiekty kątowe RXJS i obserwowalne z żądaniami API
Szukaj…
Uwagi
Zgłaszanie żądań API za pomocą usługi Angular 2 Http i RxJS jest bardzo podobne do pracy z obietnicami w Angular 1.x.
Do tworzenia żądań używaj klasy Http . Klasa Http udostępnia metody wysyłania żądań HTTP GET , POST , PUT , DELETE , PATCH , HEAD za pomocą odpowiednich metod. Udostępnia także ogólną metodę request do wysyłania dowolnego rodzaju żądania HTTP.
Wszystkie metody klasy Http zwracają Observable<Response> , do której można zastosować operacje RxJS . .subscribe() metodę .subscribe() i przekazujesz funkcję, która ma być wywoływana, gdy dane są zwracane w strumieniu Observable.
Strumień obserwowalny dla żądania zawiera tylko jedną wartość - Response i kończy / rozlicza się, gdy żądanie HTTP zostanie pomyślnie zakończone, lub błędy / usterki, jeśli zostanie zgłoszony błąd.
Uwaga: obserwowalne zwracane przez moduł Http są zimne , co oznacza, że jeśli subskrybujesz obserwowalne wiele razy, pierwotne żądanie zostanie wykonane raz dla każdej subskrypcji. Może się tak zdarzyć, jeśli chcesz wykorzystać wynik w wielu składnikach aplikacji. W przypadku żądań GET może to powodować dodatkowe żądania, ale może to spowodować nieoczekiwane wyniki, jeśli subskrybujesz więcej niż jeden raz żądania PUT lub POST.
Podstawowe zapytanie
Poniższy przykład demonstruje proste żądanie HTTP GET. http.get() zwraca wartość Observable która ma metodę subscribe . Ten dołącza zwrócone dane do tablicy posts .
var posts = []
getPosts(http: Http):void {
this.http.get(`https://jsonplaceholder.typicode.com/posts`)
.map(response => response.json())
.subscribe(post => posts.push(post));
}
Hermetyzowane żądania API
Dobrym pomysłem może być enkapsulacja logiki obsługi HTTP we własnej klasie. Poniższa klasa przedstawia metodę pobierania postów. http.get() metodę http.get() i wywołuje .map na zwróconym polu Observable celu przekształcenia obiektu Response obiekt 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)
});
}
}
W poprzednim przykładzie użyto klasy Post do przechowywania zwróconych danych, które mogą wyglądać następująco:
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;
}
}
Komponent może teraz używać klasy BlogApi do łatwego pobierania danych Post bez BlogApi się działaniem klasy Http .
Poczekaj na wiele żądań
Jednym z typowych scenariuszy jest oczekiwanie na zakończenie szeregu żądań przed kontynuowaniem. Można to osiągnąć za pomocą metody forkJoin .
W poniższym przykładzie forkJoin jest używany do wywoływania dwóch metod, które zwracają Observables . .subscribe zwrotne określone w metodzie .subscribe zostanie wywołane, gdy oba obserwowalne zakończą się. Parametry .subscribe przez .subscribe zgodne z kolejnością podaną w wywołaniu do .forkJoin . W takim przypadku najpierw posts a następnie tags .
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}