AngularHttpClient:インターセプター
序章
Angularの HttpInterceptor
■発信要求または着信応答をインターセプトおよび/または変更するメカニズムを提供します。 これらは、フロントエンドを除いて、Expressのようなフレームワークを備えたミドルウェアの概念と非常によく似ています。 インターセプターは、キャッシングやロギングなどの機能に非常に役立ちます。
注:ここの内容はAngular4.3以降に適用されます。
この記事では、使用方法について学習します 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 => {
if (evt instanceof HttpResponse) {
console.log('---> status:', evt.status);
console.log('---> 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);
}
}