Angular拦截器

Angular拦截器是Angular应用中全局捕获和修改HTTP请求和响应的方式，例如携带Token和捕获Error。前提是只能拦截使用HttpClientModule发出的请求，如果使用axios则拦截不到。
一、创建拦截器
使用命令ng g interceptor name，本文创建拦截器ng g interceptor LanJieQi

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

@Injectable()
export class LanJieQiInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request);
  }
}

二、拦截器注入
在模块中注入拦截器

@NgModule({
  providers: [
    { provide: NZ_I18N, useValue: en_US },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LanJieQiInterceptor,
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

三、请求头拦截

@Injectable()
export class LanJieQiInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    //request: HttpRequest<unknown>表示请求对象，包含了和请求相关的所有信息,unkonow指定请求体body的类型
    //next: HttpHandler 当将请求对象修改完成之后，将修改后的请求对象通过next中的handle方法传回真正发送请求的方法中
    let req = request.clone({
      setHeaders:{
        token:"123456789"
      }
    })//在请求头中增加token：1213456789
    return next.handle(req)//将修改后的请求返回给应用
  }
}

效果：

四、响应捕获

@Injectable()
export class LanJieQiInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    //request: HttpRequest<unknown>表示请求对象，包含了和请求相关的所有信息,unkonow指定请求体body的类型
    //next: HttpHandler 当将请求对象修改完成之后，将修改后的请求对象通过next中的handle方法传回真正发送请求的方法中
    let req = request.clone({
      setHeaders:{
        token:"123456789"
      }
    })//在请求头中增加token：1213456789
    return next.handle(req).pipe(
      retry(2),//发现异常后自动再请求2次
      catchError((error:HttpErrorResponse)=>
      throwError(error)
      )
      )//将修改后的请求返回给应用
  }
}

效果：