Angular_HttpClientでバックエンド通信をする #285日目
【一言日記】
明日からの次男のお宮参りに備えて実家にプチ帰省中。構ってほしくてイヤイヤ期の長男(3歳)を厳しめに叱ってしまった。夜遊んであげたらご機嫌に。子育てって難しいなー。笑
HttpClientとは
HttpClientはAngularに標準で備わっている、HTTPプロトコルを使ったバックエンド通信のためのAPIです。Angular4.3以降のバージョンで、app.module.tsにHttpClientModuleをimprotすることで使用可能です。
HttpClientModuleでは「インターセプター」や「エラー処理」といった機能も追加されています。
インターセプター：
httpClientに割り込み処理を入れることで、リクエストを投げる前やレスポンスを受け取った後に共通の処理を行うことができる。
エラー処理：
Angularに限らず、SPA (Single Page App)でのエラー処理は大きく以下2つに分類され、それを定義できます。
①ダイアログを表示して処理がエラーであることを示す
②エラー画面に遷移させる
ちなみにMPA (Multi Page App)は②のみです。
HttpClientの使い方
まずはHttpClientModuleをapp.module.tsにインポートします。
[app.module.ts]
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
HeroesComponent,
],
imports: [
BrowserModule,
HttpClientModule, // HttpClientModuleはBrowserModuleの後に追加する
],
bootstrap: [AppComponent]
})
export class AppModule { }あとはバックエンド通信を行うserviceのconstractorで、HttpClientを呼び出せばOKです。
[hero.service.ts]
import { HttpClient, HttpHeaders } from '@angular/common/http';
export class HeroService {
private heroesUrl = 'backend/api/heroes'; //Web APIのURL。あるファイルに作成してあるヒーローデータオブジェクトのAPIを叩きたい。
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }) //HTTPの保存リクエストのときの特別なヘッダー
};
constructor(
private http: HttpClient,
) { }実際にバックエンド通信をいくつか定義してみます。
まずはバックエンドからデータを取得するGETリクエストです。同じhero.service.tsに定義します。
[hero.service.ts]
～中略～
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
tap(heroes => this.log('fetched heroes')),
catchError(this.handleError<Hero[]>('getHeroes', []))
);
}アノテーションが「Observable」となっていますが、HttpClientを使用する場合のレスポンスは基本的にこうなります。
主題とは少しずれますが、各関数についても簡単に触れておきます。
pipe()はObservableのメソッドで、Observableの値を順に受け取り、カンマ(,)で区切った処理を順に実施するものです。
tap()はObservable.pipe()と共に使えるオペレーターで、元の値を保持したまま別の操作を行うことを目的としたものです。分かりやすい例だと、Debug用途でよく使われています。上記でもDebugをイメージした処理を記述しています。
ちなみにtap()と対になるものでmap()がありますが、こちらは元の値を変更することを目的としたものです。Observableの値に対して一定の処理を加えたい時などに使えます。
ほとんど同じ文法ですが、他のリクエストでも記載します。
PUT (指定したデータを上書き) するときは以下です。
updateHero(hero: Hero): Observable<any> {
return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
tap(_ => this.log(`updated hero id=${hero.id}`)),
catchError(this.handleError<any>('updateHero'))
);
}POST (新しいオブジェクトを追加) するときは以下です。
addHero(hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
catchError(this.handleError<Hero>('addHero'))
);
}DELETE (オブジェクトを削除) するときは以下です。
deleteHero(id: number): Observable<Hero> {
const url = `${this.heroesUrl}/${id}`;
return this.http.delete<Hero>(url, this.httpOptions).pipe(
tap(_ => this.log(`deleted hero id=${id}`)),
catchError(this.handleError<Hero>('deleteHero'))
);
}ここまでお読みいただきありがとうございました！！