Angular8 Http拦截器简单使用教程
拦截器
Http拦截器就是拦截发出的请求，对其进行统一添加额外处理，然后放行；对响应进行拦截并作出业务上的判断，决定是否给与返回。
先看一组常见的业务请求：
this.http.post('http://127.0.0.1:8080/api/getList',{
header:{
token:'asdasdas'
},
observe:'body',
params:{
pageSize:10,
pageIndex:1
},
responseType:'json',
withCredentials:true
});
可以看出有些配置是几乎所有请求都共通得，有的需要token等参数，一个项目全部手动写得话，第一容易漏写，第二以后如果有改动，需要所有接口都调整，不利于维护，最理想得状态就是只修改参数和api地址，其他得交给特别得机制去处理，这就引出了今天的主角-HttpInterceptor
定义拦截器
按照官方约定，文件应该是以‘.interceptor.ts'作为后缀
import{Injectable}from'@angular/core';
import{HttpInterceptor,HttpEvent,HttpHandler,HttpRequest,HttpResponse}from'@angular/common/http';
import{Observable}from'rxjs';
import{tap}from'rxjs/operators';
constignoreToken=['login','logout','table'];
@Injectable()
exportclassCommonInterceptorimplementsHttpInterceptor{
intercept(req:HttpRequest,next:HttpHandler):Observable>{
//先补全请求协议
leturl=req.url;
constneedToken=ignoreToken.filter(u=>url.match(u));
if(url.indexOf('http://')<0||url.indexOf('https://')<0){
url='http://'+url;
}
//过滤掉不需要token的请求
if(!needToken.length){
req=req.clone({
url
});
}else{
req=req.clone({
url,
headers:req.headers.set('token','asdqwe')
});
}
returnnext.handle(req).pipe(
tap(
event=>{
if(eventinstanceofHttpResponse){
console.log(event);
if(event.status>=500){
//跳转错误页面
}
}
},
error=>{
//token过期服务器错误等处理
})
);
}
}
组件：
getTemp(){
this.http.post('172.16.10.161:3000/table',{
params:{
pageSize:10,
pageIndex:1
}
}).subscribe(res=>{
console.log(res);
});
}
该拦截器实现的功能比较简单，但是结构算是完整的，和管道类似，想应用此拦截器需要注入在app模块，
在providers数组种添加
{provide:HTTP_INTERCEPTORS,useClass:CommonInterceptor,multi:true}
拦截器根据业务复杂度，其内容也随着复杂，通常管理下共通的配置，核心是处理各类异常，甚至错误码处理。
总结
以上所述是小编给大家介绍的Angular8Http拦截器简单使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！