angular6之http请求拦截器

在前端项目中我们往往需要对每次请求做一些统一的处理，比如请求结果session过期处理，在header头部加上验证参数token等等，这个时候就需要用到拦截器。

由于angular中http请求，依赖@angular/common/http模块，将HttpInterceptor，HttpRequest，HttpResponse等对象引入

import {
    HttpInterceptor,
    HttpRequest,
    HttpHandler,
    HttpErrorResponse,
    HttpHeaderResponse,
    HttpResponse,
} from '@angular/common/http';

　　引入模块后，我们要实现HttpInterceptor接口

export class MyInterceptor implements HttpInterceptor {
    constructor (){}
}

　　具体的拦截器部分实现：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<
    | HttpHeaderResponse
    | HttpResponse<any>
  > {　

        let req = request.clone({param1:'',param2:''});//这里可以在请求中加参数
        return next.handle(req).pipe( mergeMap((event: any) => {
            // 正常返回，处理具体返回参数
            if (event instanceof HttpResponse && event.status === 200)
                return this.handleData(event);//具体处理请求返回数据
                return of(event);
        }), 
        catchError((err: HttpErrorResponse) => this.handleData(err)))
      }

　　在平常我们的业务中往往服务端返回200，但是有可能是业务上出错，比如说请求的参数不对，session过期没有通过验证等等，这个时候需要我们做统一处理

private handleData(
        event: HttpResponse<any> | HttpErrorResponse,
      ): Observable<any> {
        // 业务处理：一些通用操作
        switch (event.status) {
          case 200:
            if (event instanceof HttpResponse) {
                const body: any = event.body;
                if (body && body.rc == 3) {
                    this.goTo('/test');
                }
            }
            break;
          case 401: // 未登录状态码
            this.goTo('/login');
            break;
          case 404:
          case 500:
           ……
          break;
          default:
          return of(event);
      }

　　这里我们对不同返回状态做同的统一处理。

最后我们将拦截器模块引入到app.module.ts跟模块中。基本就完成了

import { MyInterceptor } from './myIntercept'
@NgModule({
     ……
     providers: [{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: 
                     true }]
    ……
})

　　注：本文部分代码参考了ng-alain中拦截器的写法，如果想了解可以参考https://github.com/cipchk/ng-alain