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 拦截器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Flash与后台
刘明伟 / 清华大学出版社 / 2007-6 / 52.00元
《Flash与后台:ASP/ASP.NET/PHP/Java/JavaScript/Delphi总动员》从目前热门的F1ash与ASP、ASP.NET、PHP、Java、JavaScript和Delphi的交互知识入手,深入浅出地讲解了F1ash与后台通信的原理和交互的过程,力求使阅读《Flash与后台:ASP/ASP.NET/PHP/Java/JavaScript/Delphi总动员》的每一位读......一起来看看 《Flash与后台》 这本书的介绍吧!