angular 拦截器
需求描述
前台需要请求后台的API
,然后在请求时API
的样式均有如下格式:
/api/...
所以依照不写重复代码的原则,一种方法我们可以定义一个公共变量,另一种就是可以定义一个拦截器,然后在请求API之前,为路径添加公共部分,再去请求。
angular中的拦截器
angular中要定义拦截器,需要实现HttpInterceptor
接口,然后实现intercept()
方法。
@Injectable() export class MyInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler) { return next.handle(req); } }
该方法接受了两个参数。第一个我们通过名字一下子就看出来这个是什么意思:这是一个http请求,他是我们主要操作的对象。另一个参数是next,他表示拦截器链表中的下一个
拦截器。也就是说他会将http请求
传递给下一个拦截器。这个链表的最后一项就是后端处理器,所以最后用过next
将请求传给后台处理。
然后我们的需求是在请求之前修改请求路径,所以需要这么写:
intercept(req: HttpRequest<any>, next: HttpHandler) { const cloneRequest = req.clone({ url: `api/${req.url}` // 添加默认api访问路径 }); return next.handle(cloneRequest); }
在angular中,如果想要修改请求,就需要调用它的clone
方法,然后修改这个克隆体,最后将克隆体通过next
对象,传递给下一个对象,或传给后台。
这里我只对url
进行了修改,当然还可以处理请求中的其他方面。
官方参考:
https://angular.cn/guide/http...
https://angular.cn/api/common...
https://angular.cn/api/common...
相关推荐
QiaoranC 2020-09-25
颤抖吧腿子 2020-09-04
liduote 2020-06-16
阿斌Elements 2020-06-11
xxuncle 2020-06-05
ChinaGuanq 2020-06-05
wanghongsha 2020-03-26
csm0 2020-03-05
shyoushine 2020-02-25
electronvolt 2020-02-12
jsonwoo 2020-01-20
ZadarrienChina 2020-01-07
wwwxuewen 2020-01-04
dynsxyc 2020-01-03
liangjielaoshi 2019-12-27
bowean 2019-12-27
wwwxuewen 2019-12-25
liwusen 2019-12-16
颤抖吧腿子 2019-12-16