Angular HttpInterceptor拦截器 多情景应用

HttpInterceptor，是Angular提供用于在全局应用程序级别处理HTTP请求的内置工具，拦截并处理HttpRequest或HttpResponse。拦截器在实战中的作用有很多，比如：统一配置网关地址，设置Http请求头，处理Http请求返回数据，统一错误处理等都是常见的需求。

这里介绍三种不同的拦截器的实现：

• 处理Http请求头 (Http Request Headers)
• 处理Http响应 (Http Response)
• Http错误处理 (Http Error)
  先看一下拦截器的最基本的实现

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

@Injectable()
export class CustomInterceptor implements HttpInterceptor {
  public intercept(req: HttpRequest, next: HttpHandler): Observable> {
    return next.handle(req);
  }
}

要创建一个自定义拦截器，我们需要实现 @angular/common/http中提供的 HttpInterceptor。每一个通过HttpClient调用的请求，都会触发拦截器调用intercept()方法。当调用intercept()方法时，Angular会向httpRequest对象传递一个引用对象。然后我们可以根据需要修改它。完成处理之后，调用next，将更新后的请求返回到应用程序。
我们需要将拦截器其注册为一个多提供者，因为在一个应用程序中可以运行多个拦截器。注：拦截器将只拦截使用HttpClient服务发出的请求。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { CustomInterceptor } from './custom.interceptor';
import { AppComponent } from './app.component';

@NgModule({
  imports:  [BrowserModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CustomInterceptor, multi: true }
  ]
})
export class AppModule { }

下面根据我们的需求实现我们的Http拦截器

处理Http请求头 (Http Request Headers Interceptor)

通常我们处理Http请求的时候，需要在请求头中加入一些身份验证信息，比如token,我们可以通过拦截器为所有的请求加上token信息

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

@Injectable()
export class HeaderInterceptor implements HttpInterceptor {

    public intercept(req: HttpRequest, next: HttpHandler): Observable> {
        return next.handle(this.addToken(req, 'bearer my token'));
    }

    private addToken(req: HttpRequest, token: string): HttpRequest {
        return req.clone({ setHeaders: { Authorization: token } });
    }
}

创建一个Http请求，来验证我们添加的token

  constructor(private httpClient: HttpClient) {
        this.httpClient.get('/assets/json/data.json').subscribe(ret => {
            // TODO:
        });
    }

http-req-header.png

处理Http响应 (Http Response Interceptor)

当我们需要对Http请求的返回数据进行统一处理时，例如，当返回结果是如下格式，status为200的时候，我们只保留我们需要的信息。

{
  "data": [
      { "id": 1, "name": "赵钱" },
      { "id": 2, "name": "孙李" },
      { "id": 3, "name": "周吴" },
      { "id": 4, "name": "郑王" }
  ],
  "requestDatetime": "1949-10-01"
}

根据上面的需求，来新增一个ResponseHandlerInterceptor

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

@Injectable()
export class ResponseHandlerInterceptor implements HttpInterceptor {

    public intercept(req: HttpRequest, next: HttpHandler): Observable> {
        return next.handle(req).pipe(
            filter(event => event instanceof HttpResponse && event.status === 200),
            map((event: HttpResponse) => event.clone({ body: event.body.data }))
        );
    }
}

上面的代码中，当返回的数据状态是200的时候，我们只返回body中我们需要的data数据。

Http错误处理 (Http Error Interceptor)

在Http请求中，我们需要对错误情况进行统一处理，这时候，我们也可以借助拦截器实现（错误提示或者重试等）。

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

@Injectable()
export class ErrorHandlerInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest, next: HttpHandler): Observable> {

        return next.handle(req).pipe(
            catchError(error => {
                switch (error.status) {
                    case 401: // Unauthorized
                        // todo
                        break;
                    case 403: // Forbidden
                        // todo
                        break;
                    default:
                        // todo
                        return throwError(error);
                }
            }),
            retry(3)
        );
    }
}

在上面的ErrorHandlerInterceptor拦截器会拦截http请求的错误情况，我们可以根据具体的业务需求进行处理，也可以通过retry(3)进行错误重试（3表示重试三次）
当然，创建的时候要记得配置注入

···
providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: HeaderInterceptor,
            multi: true
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: ResponseHandlerInterceptor,
            multi: true
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: ErrorHandlerInterceptor,
            multi: true
        }
    ]
···

HttpInterceptor 官方链接