Ugo

Webエンジニアのためのプログラミング情報サイト

  • AngularのHttpClientの使い方！ヘッダー・インターセプター・パラメーターなど。

AngularのHttpClientの使い方！ヘッダー・インターセプター・パラメーターなど。

AngularのHttpClientの使い方！ヘッダー・インターセプター・パラメーターなど。

この記事では、AngularのHttpClientModuleを使用したバックエンド通信の方法を初心者向けに説明する。

Angularを使用してWebアプリケーションを開発するならば、必ずといっていいほど使用することになるのがHttpClientModuleだ。

バックエンドとの通信はハマりやすいポイント。基本的な使用方法を身に着けておいて実務の際に困らないように備えておきたい。

目次

HttpClientとは？

HttpClientはAngularに標準で備わっている、HTTPプロトコルを使ったバックエンド通信のためのAPI。

HttpClientModuleはそれまでのHttpModuleに代わりAngular 4.3から導入された。

HttpClientModuleでは、インターセプターやエラー処理といった機能が追加されている。

バックエンドシステムを使用することができないユニットテストにおいてはHttpClientTestingModuleを使用する。

HttpClientを導入する

では、HttpClientの使い方を見ていこう。

HttpClientModuleをインポートする

HttpoClientを使用する場合は、HttpClientModuleをapp.module.tsにインポートする。

import {HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule　// HttpClientModuleはBrowserModuleの後に追加する。
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

あとはHttpClientを使用するサービスのコンストラクタでHttpClientを呼び出す。

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class UserService {
  constructor(private _httpClient: HttpClient) { }
}

HttpClientのCRUDオペレーション

リクエストのタイプ別にHttpClientの使用例を見ていこう。

GETリクエスト

まずはデータベースにあるオブジェクトを取得するために使われるGETリクエストから見ていこう。

public users: UserInfo[];

getUsers() {
	this._httpClient.get<UserInfo[]>('https://localhost:8000/backend/users').subscirbe(userResponse => {
		this.users = userResponse;
	});
}

HttpClientを使用する場合、基本的にレスポンスはObservavleタイプで受け取ることになる。

受け取ったオブジェクトをテンプレートにおいて使用する際はasyncパイプを使用する。

レスポンスはPromiseに変換して受け取ることもできる。

なお、Observableタイプについて深く知りたい人はこちらの記事を読んでほしい。

関連記事
RxJSでJavaScriptのリアクティブプログラミングを理解する！Angularを使った実装例。
RxJSでJavaScriptのリアクティブプログラミングを理解する！Angularを使った実装例。
この記事では、JavaScriptのライブラリである「RxJS」について詳しく解説したい。 RxJS(ReactiveX for JavaScript)はJavaScriptでリア […]

POSTリクエスト

新しいオブジェクトをバックエンドのデータベースに追加する際はPOSTリクエストを利用する。

saveNewUser(user: UserInfo) {
	this._httpClient.post('https://localhost:8000/backend/user', user).subscirbe(userResponse => {
		console.log('New user is successfully added. ' + userResponse);
	});
}

DELETE リクエスト

特定のオブジェクトを削除する場合は、DELETEリクエストが使用される。

removeUser(userId: number) {
	this._httpClient.delete('https://localhost:8000/backend/user/' + useId).subscirbe(response => {
		console.log('User is successfully removed. ' + response);
	});
}

PUTリクエスト

PUTリクエストはオブジェクトの内容をアップデートするために使用される。

updateUser(user: UserInfo) {
	this._httpClient.put('https://localhost:8000/backend/user/' + useId, user).subscirbe(response => {
		console.log('User is successfully updated. ' + response);
	});
}
PATCHリクエスト
本来、オブジェクトの一部のみをアップデートする場合はPATCHメソッドを、オブジェクト全体を置き換える場合はPUTメソッドを使用する。PATCHリクエストに関してはRFC 5789で役割が定義されている。

HttpClientの使い方

その他のHttpClientの知っておきたい使い方について紹介してく。

ヘッダー HttpHeaders

HttpClientでは、HttpHeadersオブジェクトにヘッダー情報を代入する。

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    Authorization: 'my-token'
  })
};

インターセプター Interceptor

HttpClientではインターセプターを使用して、リクエストとレスポンスに対し処理をおこなうことができる。

ここではよく使用されるトークンのインターセプターを例にして、実装方法を紹介したい。

export class TokenInterceptor implements HttpInterceptor {

 constructor(private authService: AuthService) {}
 
 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {  
   
  request = request.clone({
   setHeaders: {Authorization: `Bearer ${this.authService.getToken()}`}
  });

  return next.handle(request);   
 }
}

作成したインターセプターはapp.module.tsのprovidesプロパティで宣言することにより使用することができる。

providers: [ { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor }]

URLパラメーター HttpParams

HttpClinetで使用できるパラメーターには幾つかの種類があるが、ここではもっともよく使われるURLにパラメーターを挿入する方法を紹介したい。

getUserById(id: number): Observable<UserIno> {
  const options = term ? { params: new HttpParams().set('userId', id) } : {};
  return this._httpClient.get<UserInfo>('https://localhost:8000/backend/user', options);
}

MENU