为什么要新建请求拦截器？
在开发中，要对请求的网络状态进行统一管理，比如一些需要全局处理的请求加添加或者过滤相应的参数，就可以在拦截器中做相应的操作，对状态码的监控做出相应的操作，对网络请求做用户身份的验证等等。在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的接口看会捕捉到什么
我们再来说说以上配置具体参数，因为我们捕获的是一个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为其他状态码，拦截返回的显示
成功与错误状态码接口返回的参数是不一样的，所以我们handleData方法的i形参用HttpResponseBase
针对返回参数的不同，我们需要改动一下代码
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse,
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)
}
}
