angular 拦截器
栏目: JavaScript · 发布时间: 6年前
内容简介:前台需要请求后台的所以依照不写重复代码的原则,一种方法我们可以定义一个公共变量,另一种就是可以定义一个拦截器,然后在请求API之前,为路径添加公共部分,再去请求。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
进行了修改,当然还可以处理请求中的其他方面。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端架构之vue+axios 前端实现登录拦截(路由拦截、http拦截)
- react离开页面,自定义弹框拦截,路由拦截
- Springboot整合Hibernate拦截器时无法向拦截器注入Bean
- 基于原生fetch封装一个带有拦截器功能的fetch,类似axios的拦截器
- SpringMVC拦截器
- IOS 拦截器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
宇宙涟漪中的孩子
谢云宁 / 四川科学技术出版社 / 2017-11 / 28.00元
近未来。日冕科技公司通过建造围绕太阳的光幕搜集了近乎无穷的能源,这些能源主要用于地球上的网络空间建设。随着全球网络时间频率的不断提升,越来越多的人选择接驳进虚拟空间,体验现实中难以经历的丰富人生。 网络互动小说作者宁天穹一直自认为是这些人中普通的一员,有一天却被一名读者带进反抗组织,了解到日冕公司的各种秘密,并被告知自己的小说将在抵抗运动中起到重要作用。 起初他拒绝参与,但看到地球被笼......一起来看看 《宇宙涟漪中的孩子》 这本书的介绍吧!