HttpInterceptor

顧名思義 http攔截器。在攔截器里面，我們可以統(tǒng)一對發(fā)出的http請求進行攔截，然后就可以開開心心的做一些"見不的人的操作"。

一個簡單的栗子

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

export class MyHttpInterceptor implements HttpInterceptor {

    constructor() {   
    
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const newurl = req.url;
        const withCredential = true;
        //更改原來的請求參數，生成一個新的請求
        const clone = req.clone({ url: newurl, withCredentials: withCredential });
        return next.handle(clone)
    }
}

實現(xiàn)自定義攔截器需要實現(xiàn)HttpInterceptor接口的intercept方法

export interface HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
}

intercept方法有兩個參數

• req：發(fā)出的Http請求對象
• next：有一個handle方法，它能返回一個Observable對象（ps：能有Observable就意味著我們可以做很多操作了）

上面的代碼實現(xiàn)了一個簡單的參數，對所有請求都設置了withCredential = true，保證跨域能帶上cookie(ps:生產環(huán)境千萬別這樣亂來哦)

HttpInterceptor還可以做很多事情，比如說我們可以利用HttpInterceptor來對每個請求都打上日志

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } from '@angular/common/http';
import { finalize, tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    let status: string = '';

    return next.handle(req).pipe(
        tap(
          event => {
            if (event instanceof HttpResponse) {
              status = 'succeeded';
            }
          },
          error => status = 'failed'
        ),
        finalize(() => {
          console.log(status)
        })
    );
  }
}

導入

Angular萬物皆模塊，所以HttpInterceptor當然是要導入Module里面才能生效鴨

import {HTTP_INTERCEPTORS} from '@angular/common/http';


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

通過在providers里面聲明自定義的攔截器就能使用了，provide、useClass、multi都是Angular依賴注入的參數，這里就不多說了。

multi設置為true的原因是因為HTTP_INTERCEPTORS是多服務TOKEN，也意味著我們可以設置多個HttpInterceptor，比如說：日志攔截器，請求修改攔截器等等。

當多個攔截器的時候，會根據聲明順序來進行執(zhí)行。

  providers: [
    {
        provide: HTTP_INTERCEPTORS, 
        useClass: A, 
        multi: true 
    },
    {
        provide: HTTP_INTERCEPTORS, 
        useClass: B, 
        multi: true 
    },
    {
        provide: HTTP_INTERCEPTORS, 
        useClass: C, 
        multi: true 
    },
  ],

Request執(zhí)行的順序是A->B->C，Response執(zhí)行的順序是C->B->A

來一段代碼，這里分別是三個攔截器，分別在開始和結束的時候都打上了console語句，然后在AppModule按照相應的順序進行定義，然后在瀏覽器查看log打出來的結果

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    let status: string = '';
    console.log('this is LoggingInterceptor start')
    return next.handle(req).pipe(
        tap(
          event => {
            console.log('this is LoggingInterceptor end')
          },
          error => status = 'failed'
        ),
        finalize(() => {
          console.log(status)
        })
    );
  }
}


export class CatchInterceptor implements HttpInterceptor{

    constructor(){

    }
    
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('this is CatchInterceptor start')
        return next.handle(req)
            .pipe(
                tap(
                    event => {
                        console.log('this is CatchInterceptor end')
                    }
                  ),
            )
    }
    
}


export class ApiInterceptor implements HttpInterceptor{

    constructor(){

    }
    
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('this is ApiInterceptor start')
        const newurl = req.url;
        const withCredential = true;
        const clone = req.clone({ url: newurl, withCredentials: withCredential });
        return next.handle(clone)
        .pipe(
            tap(
                event => {
                    console.log('this is ApiInterceptor end')
                }
              ),
        )
    }
    
}

  providers: [
    {
      provide:HTTP_INTERCEPTORS,
      useClass:ApiInterceptor,
      multi:true,
    },
    {
      provide:HTTP_INTERCEPTORS,
      useClass:LoggingInterceptor,
      multi:true,
    },
    {
      provide:HTTP_INTERCEPTORS,
      useClass:CatchInterceptor,
      multi:true,
    }
  ],

//這是瀏覽器輸出的結果
this is ApiInterceptor start
this is LoggingInterceptor start
this is CatchInterceptor start
this is CatchInterceptor end
this is LoggingInterceptor end
this is ApiInterceptor end