为什么要新建请求拦截器？

在开发中，要对请求的网络状态进行统一管理，比如一些需要全局处理的请求加添加或者过滤相应的参数，就可以在拦截器中做相应的操作，对状态码的监控做出相应的操作，对网络请求做用户身份的验证等等。在VUE中请求方面的封装都是基于axios插件，一样的有网络请求拦截器，只不过angular是拦截器是自身的功能，不需要借助第三方插件

通过angular-cli中命令创建interceptor拦截器

    ng g interceptor net/interceptor
此时在net文件目录下就新建了一个interceptor.interceptor.ts文件
提供这个拦截器
这个 Interceptor 就是一个由 Angular 依赖注入 (DI)系统管理的服务。 像其它服务一样，你也必须先提供这个拦截器类，应用才能使用它。
由于拦截器是 HttpClient服务的（可选）依赖，所以你必须在提供 HttpClient的同一个（或其各级父注入器）注入器中提供这些拦截器。 那些在 DI 创建完 HttpClient 之后再提供的拦截器将会被忽略。
由于在 AppModule 中导入了 HttpClientModule，导致本应用在其根注入器中提供了 HttpClient。所以你也同样要在 AppModule 中提供这些拦截器。
在从 @angular/common/[http](https://angular.cn/api/common/http) 中导入了 HTTP_INTERCEPTORS 注入令牌之后，编写如下的 Interceptor 提供者注册语句：
注意 multi: true 选项。 这个必须的选项会告诉 Angular ,HTTP_INTERCEPTORS 是一个多重提供者的令牌，表示它会注入一个多值的数组，而不是单一的值。
你也可以直接把这个提供者添加到 AppModule 中的提供者数组中，不过那样会非常啰嗦。况且，你将来还会用这种方式创建更多的拦截器并提供它。
创建的文件内容如下
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
} from '@angular/common/http';
import { Observable, of } from 'rxjs';
@Injectable()
export class InterceptorInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
intercept 方法会把请求转换成一个最终返回 HTTP 响应体的 Observable。 在这个场景中，每个拦截器都完全能自己处理这个请求。

假如我们要对请求地址做统一处理，或者是对请求体模式的修改，我们可以调用 req.clone({})方式，完全复制一份请求体，这是req参数是一个HttpRequest对象，我们来看下这个对象里面又啥请求提内容，打印看看
我们发现这个对象是我们要请求的一些参数，例如header,url,method，等等，假如我们要修改请求前的地址我们可以如下设置
 intercept(res: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     let newReq=req.clone({
         url:`api/${req.url}`,
    return next.handle(newReq)
默认不需要改的参数，我们不许添加，只需要添加要改的参数，可以查看官方文档关于(HttpRequest)[https://angular.cn/api/common/http/HttpRequest

]类的参数用法
统一捕捉请求结果
因为intercept方法返回的是一个Observable流对象，基本的错误状态码返回结果需要做处理，我们要进行拦截处理，还有是正常接口返回，特殊status状态码为200，但是后台又自定义code参数返回的信息进行相应操作的，,我们可以新建一个handleData方法来做这个接口返回的统一处理
首先来看看错误的状态码返回时的捕捉
我在后台返回了一个错误的状状态码
router.post('/auth', function(req, res, next) {
  res.status(400).send('Bad Request')
然后拦截器中方需要这样如下配置
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err:HttpErrorResponse)=>this.handleData(err))
  private handleData(req:HttpErrorResponse){
       console.log(req);
       return of(req)
此时我们访问这个报400的接口看会捕捉到什么
image.png
我们再来说说以上配置具体参数，因为我们捕获的是一个HttpResponse对象所以，调用handleData方法传过来的是一个httpRespose类，最后为啥要retrue of(req) ，因为我们的 intercept() 方法定义函数时会返回一个Observable流，所以我们需要返回，并且需要用of()流方法发出我们的返回值。

我们的打印那里已经捕捉了具体的status,以及具体的返回参数此时，假如我要在此处判断status做一个弹框处理
  private handleData(res: HttpErrorResponse): Observable<any> {
    console.log(res);
    switch (res.status) {
      case 400:
         this.$commom.error(res.error)
        break;
      default:
    return of(res)
此时遇到状态码为400的时候就会弹出错误提示框，或者在default中不管是什么错误状态码都弹框，这种拦截比较好处理，，还有一种接口类型是大部分的接口状态码返回都是200,然后在返回参数里加code区分，这种就比较难处理了，此时我们需要修改下拦截器代码
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
       tap((event:any)=>{
          if(event instanceof HttpResponseBase) this.handleData(event);
           return of(event)
      catchError((err:HttpErrorResponse)=> this.handleData(err))
  private handleData(res: HttpResponseBase): Observable<any> {
    console.log(res);
    let body=(res as any).body;
    if(body.code != 200){
       this.$commom.error(body.message);  
    return of(res)
这个handleData方法是错误函数，所以它的形参是HttpErrorResponse，但是我们的请求成功也需要拦截做些处理，所以这里的形参只能写HttpResponseBase，HttpResponseBase是HttpErrorResponse和HttpResponse的父类，我们可以打印下status为200和status为其他状态码，拦截返回的显示
  HttpErrorResponse,
} from '@angular/common/http';
import { merge, Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators'
import { CommonService } from '../services/common.service';
import { HttpResponseBase } from '@angular/common/http';
@Injectable()
export class InterceptorInterceptor implements HttpInterceptor {
  constructor(private $commom: CommonService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      tap((event: any) => {
        if (event instanceof HttpResponseBase) this.handleData(event);
        return of(event)
      catchError((err: HttpErrorResponse) => this.handleData(err))
  private handleData(res: HttpResponseBase): Observable<any> {
    console.log(res);
    if (res instanceof HttpResponse) {
      let body = (res as any).body;
      if (body.code != 200) {
        this.$commom.error(body.message);
      if (body.code === 1003) {
          /**todo  =>  jump()*/
    if (res instanceof HttpErrorResponse) {
      this.$commom.error(res.error);
    return of(res)