AngularHttpClient：インターセプター

序章

Angularの HttpInterceptor■発信要求または着信応答をインターセプトおよび/または変更するメカニズムを提供します。 これらは、フロントエンドを除いて、Expressのようなフレームワークを備えたミドルウェアの概念と非常によく似ています。 インターセプターは、キャッシングやロギングなどの機能に非常に役立ちます。

この記事では、使用方法について学習します HttpInterceptor■Angularプロジェクト。

基本設定

インターセプターを実装するには、注入可能で実装するクラスを作成する必要があります HttpInterceptor. クラスは定義する必要があります intercept 正しく実装する方法 HttpInterceptor. インターセプトメソッドは2つの引数を取ります。 request と next、およびタイプのオブザーバブルを返します HttpEvent.

• request はリクエストオブジェクト自体であり、タイプは HttpRequest.
• next タイプのHTTPハンドラーです HttpHandler. ハンドラーには handle 目的のメソッドを返します HttpEvent 観察可能。

以下は、基本的なインターセプターの実装です。 この特定のインターセプターは単にRxJSを使用します do リクエストの値をログに記録する演算子 filter クエリパラメータと HttpEvent コンソールへのステータス。 The do 演算子は、次のような副作用に役立ちます。

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

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
return next.handle(req).do(evt =&gt; {
  if (evt instanceof HttpResponse) {
    console.log('---&gt; status:', evt.status);
    console.log('---&gt; filter:', req.params.get('filter'));
  }
});

インターセプターを接続するには、アプリモジュールまたは機能モジュールでインターセプターを提供します。 HTTP_INTERCEPTORS トークン：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './interceptors/my.interceptor';

複数の迎撃機

次のようなもので複数のインターセプターを定義できます。

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }
],

インターセプターは、提供された順序で呼び出されます。 以上で、 MyInterceptor 最初にHTTPリクエストを処理します。

リクエストの変更

HttpRequest オブジェクトは不変であるため、オブジェクトを変更するには、最初にコピーを作成してから、コピーを変更して呼び出す必要があります。 handle 変更されたコピー。 リクエストオブジェクトの clone メソッドはまさにそれを行うのに便利です。 これは、を設定する単純なインターセプターです。 filter パラメータを次の値にクエリします completed:

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const duplicate = req.clone({ params: req.params.set('filter', 'completed') });

    return next.handle(duplicate);
  }
}

そして、これが単語のすべての出現を変更するインターセプターの最後の例です pizza ピザ絵文字へのリクエストの本文にあります（🍕）。 本文のないリクエストは、元のリクエストを次のように返すことでパススルーされます。 return next.handle(req):

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (req.body) {
      const duplicate = req.clone({ body: req.body.replace(/pizza/gi, '🍕') });
      return next.handle(duplicate);
    }
    return next.handle(req);
  }
}