Angular 2
Угловые объекты RXJS и наблюдения с запросами API
Поиск…
замечания
Выполнение запросов API с помощью функции Angular 2 Http и RxJS очень похоже на работу с обещаниями в Angular 1.x.
Для выполнения запросов используйте класс Http . Класс Http предоставляет методы для выдачи HTTP-запросов GET , POST , PUT , DELETE , PATCH , HEAD помощью соответствующих методов. Он также предоставляет общий метод request для выдачи любого HTTP-запроса.
Все методы класса Http возвращают Observable<Response> , к которым вы можете применить операции RxJS . Вы вызываете метод .subscribe() и передаете функцию, которая будет вызываться, когда данные возвращаются в потоке Observable.
Поток Observable для запроса содержит только одно значение - Response и завершается / устанавливается, когда HTTP-запрос завершается успешно или ошибки / ошибки при возникновении ошибки.
Обратите внимание, что наблюдаемые, возвращаемые модулем Http являются холодными , что означает, что если вы подписываетесь на наблюдаемое несколько раз, исходный запрос будет выполняться один раз для каждой подписки. Это может произойти, если вы хотите использовать результат в нескольких компонентах вашего приложения. Для запросов GET это может привести к некоторым дополнительным запросам, но это может привести к неожиданным результатам, если подписываться более одного раза на запросы PUT или POST.
Основной запрос
Следующий пример демонстрирует простой HTTP-запрос GET. http.get() возвращает Observable , который имеет метод subscribe . Это добавляет возвращаемые данные в массив 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
Может быть хорошей идеей инкапсулировать логику обработки HTTP в свой класс. Следующий класс предоставляет метод для получения сообщений. Он вызывает метод http.get() и вызывает .map на возвращаемом Observable для преобразования объекта Response объект 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)
});
}
}
Предыдущий пример использует класс Post для хранения возвращаемых данных, который может выглядеть следующим образом:
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;
}
}
Компонент теперь может использовать класс BlogApi для легкого извлечения данных Post не BlogApi к BlogApi класса Http .
Подождите несколько запросов
Один из распространенных сценариев - дождаться завершения ряда запросов до продолжения. Это может быть выполнено с использованием метода forkJoin .
В следующем примере forkJoin используется для вызова двух методов, возвращающих Observables . Обратный вызов, указанный в методе .subscribe будет вызываться, когда оба Observables завершены. Параметры, предоставленные .subscribe соответствуют порядку, указанному в вызове .forkJoin . В этом случае сначала posts tags .
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}