【Angular】HttpClientでstatusCodeを取得する

概要

Angular 4以降で登場したHttpClientでは特に指定がない場合はJSON型の戻り値を扱います。
以前のHttpモジュールのようにHttpレスポンスのステータスコードを扱いたい場合は、引数に{ observe: 'response' }の指定が必要になります。

get処理については戻り値をJSONのオブジェクトで扱えるのは良いのですが、post,put,deleteではステータスコードで処理をするケースが多いので若干不便ですね・・・

動作環境

• Angular 6.0.0
• TypeScript 2.7.x

サンプルソース

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class AppService {
    constructor(private http: HttpClient) { }

    public register(data: string): Observable<number> {
        // observe: resonseを指定することで、HttpResponseを扱える
        return this.http.post('api/data', data, { observe: 'response' }).pipe(
            // HTTPステータスコードを戻す
            map((res: HttpResponse<any>) => res.status),
            // エラー時もHTTPステータスコードを戻す
            catchError((err: HttpErrorResponse) => of(err.status))
        );
    }
}

参考URL

Angular Docs