【Angular】HttpInterceptorの実装(レスポンス内容確認)

概要

以前紹介したAngularのHttpInterceptorでレスポンス内容を確認することも出来ます。今回はそのサンプルソースをのせておきます。

kakkoyakakko2.hatenablog.com

動作環境

Angular 6.0.0
TypeScript 2.7.x

サンプルソース

接続先のURLや通信結果のHTTPステータスコード等をログ出力するサンプル。

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class LogInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            tap(event => {
                // HttpResponse型チェック
                if (event instanceof HttpResponse) {
                    // URLやHTTPステータスコードをログに出力
                    console.log(`url: ${req.url}, method: ${req.method}, status: ${(<HttpResponse<any>>event).status}`);
                }
            })
        );
    }
}