Angular 2
角度のあるRXJS科目とObservablesのAPIリクエスト
サーチ…
備考
Angular 2 HttpサービスとRxJSを使用したAPIリクエストの作成は、Angular 1.xの約束事と非常によく似ています。
要求を行うには、 Httpクラスを使用します。 Httpクラスは、対応するメソッドを介してHTTPリクエストGET 、 POST 、 PUT 、 DELETE 、 PATCH 、 HEADリクエストを発行するメソッドを公開します。また、あらゆる種類のHTTP要求を発行するための汎用requestメソッドを公開しています。
HttpクラスのすべてのメソッドはObservable<Response>返し、 RxJS操作を適用できます。 .subscribe()メソッドを呼び出し、Observableストリームでデータが返されたときに呼び出される関数を渡します。
要求のObservableストリームには、 Response 、およびHTTP要求が正常に完了したときに完了/解決する、またはエラーが発生した場合はエラー/障害という1つの値のみが含まれます。
Httpモジュールから返されたオブザーバブルはコールドです。つまり、オブザーバブルに複数回サブスクライブすると、各サブスクリプションごとに1回だけ元のリクエストが実行されます。これは、アプリケーションの複数のコンポーネントで結果を使用する場合に発生します。 GETリクエストの場合、余分なリクエストが発生する可能性がありますが、PUTリクエストまたはPOSTリクエストを複数回購読すると、予期しない結果が発生する可能性があります。
基本要求
次の例は、単純なHTTP GET要求を示しています。 http.get()は、 subscribeメソッドを持つObservableを返します。これは返されたデータを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()メソッドを呼び出し、返されたObservable .mapを呼び出して、 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クラスを使用して、 Httpクラスの動作に関係なく、 Postデータを簡単に取得できます。
複数のリクエストを待つ
1つの一般的なシナリオは、続行する前にいくつかの要求が完了するのを待つことです。これは、 forkJoinメソッドを使用して実行できます。
次の例では、 Observablesを返す2つのメソッドを呼び出すためにforkJoinが使用されています。両方のObservableが完了すると、 .subscribeメソッドで指定されたコールバックが呼び出されます。 .subscribeによって提供されるパラメータは、 .subscribeで指定された.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;
}));
}