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