在Vue中使用axios请求拦截的实现方法


Posted in Javascript onOctober 25, 2018

一、前言

axios的基础使用就不过多的讲解啦,如何使用可以看axios文档使用说明·Axios中文说明

在这里和大家分享一下axios拦截在实际项目中的使用

很多人都看过axios的官方文档中拦截器这一栏,有的人可能会有点懵,因为文档只告诉你有这个东西,而不告诉你在什么情况下使用。很多初学者就会放弃使用axios拦截器,毕竟拦截器是可以不使用的,但是使用拦截器,会在页面中减少很多不必要的代码。

二、说在前面的

项目使用的ui框架是iview

以下友好提示均使用iview ui的message提示组件,例如this.$Message.xxx

/api/request 仅仅只是例子接口,实际开发用后台提供的接口。

code是后台状态码,我这里也只是例子,不要问我为毛我的返回码和你的怎么不一样这样的问题哈...这些都需要和后台沟通约定的。

使用的请求头是:axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';至于为什么使用这个请求头可以看看我的另外一篇文章关于axios会发送两次请求,有个OPTIONS请求的问题
因为使用的是这个请求头所以需要用qs模块,不然后台不认这个数据。

三、不使用请求拦截

如果不使用请求拦截,也是可以的,但是会多了非常多的代码,我们以登录页为例。

在Vue中使用axios请求拦截的实现方法

一个单纯,没有花里胡哨的页面,|ω・)

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
 //特殊错误处理,状态为10时为登录超时
 if(data.data.code === 10){
  this.$Message.error("登录已超时,请重新登录")
  this.$router.push("/login")
 //其余错误状态处理 
 }else if(data.data.code != 0){
  this.$Message.error(data.data.msg)
 //请求成功
 }else if(data.data.code === 0){
  //进行成功业务逻辑
 }
 //.......
});

如果不使用请求拦截,那么对每一条请求每一个状态都要特殊处理,如果请求特殊状态有数十个,每个页面有很多请求,那么页面会变得很长很臃肿,不好维护。

三、使用请求拦截

相同的请求返回代码我们可以抽取出来,写在请求拦截中

当我们设置了拦截之后,在我们的组件代码中可以简化很多,还是以登录界面为例:

在main.js中

//请求发送拦截,把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {
 //这个例子中data是loginName和password
 let REQUEST_DATA = request.data
 //统一进行qs模块转换
 request.data = qs.stringify(REQUEST_DATA)
 //再发送给后台
 return request;
}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});
//请求返回拦截,把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
 //特殊错误处理,状态为10时为登录超时
 if (response.data.code === 10) {
 iView.Message.error("登录已超时,请重新登录");
 router.push("/login")
 //其余错误状态处理 
 } else if (response.data.code != 0) {
 iView.Message.error(response.data.msg)
 //请求成功
 } else if(response.data.code === 0){
 //将我们请求到的信息返回页面中请求的逻辑
 return response;
 }
 //......
}, function (error) {
 return Promise.reject(error);
});
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
 //这是要先判断data,如果请求的数据状态code不为0,会被拦截,则data为undefined
 if(data){
  //进行请求返回成功逻辑
 }
});

这样我们就对axios请求添加了拦截,可以减少很多代码逻辑,页面可读性更高,可维护性也更高

四、其他

这就是axios拦截的最基础的用法,当然也不止于此,我们也可以进行扩展延伸,做更多的事情,只要你的业务有需求,axios拦截总能帮到你,这些就需要举一反三,工具是死的人是活的,我可以再举个小例子,比如设置请求签名。

请求签名是前台和后台约定的一种沟通方式,对数据进行加密,可以一定程度上保证数据的安全性

还是以这个登录页面为例

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
 //这是要先判断data,如果请求的数据状态code不为0,会被拦截,则data为undefined
 if(data){
  //进行请求返回成功逻辑
 }
});

我们把httpRequest这个data信息数据发送给后台之前,进行签名,并加密数据

在main.js中,我们对发送的数据进行拦截

//请求发送拦截
axios.interceptors.request.use((request) => {
 //获取请求的数据,这里是loginName和password
 let REQUEST_DATA = request.data
 //获取请求的地址,这里是/api/request
 let REQUEST_URL = request.url
 //设置签名并进行qs转换,且赋值给request的data,签名函数另外封装
 request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
 //发送请求给后台
 return request;
}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});
//已封装好的签名函数
function requestDataFn(data, method) {
 let postData = {}
 //时间戳,时间戳函数不作展示,也是已封装好的
 postData.timestamp = getNowFormatDate();
 //请求用户的session以及secretKey信息,为空是未登录,登录后我把它存在localStorage中,这个存在哪里都可以,这里只作为例子。
 postData.session = localStorage.getItem('session') || '';
 postData.secretKey = localStorage.getItem('secretKey') || '';
 //请求的地址,这里是/api/request
 postData.method = method;
 //请求的数据这里是loginName和password,进行base64加密
 let base64Data = Base64.encode(JSON.stringify(data));
 //设置签名并进行md5加密
 let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
 //把数据再次进行加密
 postData.data = encodeURI(base64Data);
 postData.signature = signature;
 return postData
}

这样我们就完成了对数据加密以及签名,这样再发送给后台。

注意:这里只作为例子展示,如果需要用到签名,如何签名,是前台和后台沟通的结果!

axios请求拦截的用处远远不止这样,具体如何使用,还需要在实际工作,实际项目中随机应变啦。

总结

以上所述是小编给大家介绍的在Vue中使用axios请求拦截的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
webpack4+react多页面架构的实现
Oct 25 #Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 #Javascript
代码整洁之道(重构)
Oct 25 #Javascript
Vue使用NPM方式搭建项目
Oct 25 #Javascript
小程序云开发实战小结
Oct 25 #Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 #Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 #Javascript
You might like
cakephp打印sql语句的方法
2015/02/13 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JS继承用法实例分析
2015/02/05 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python调用百度语音REST API
2018/08/30 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
EJB实例的生命周期
2016/10/28 面试题
玩具公司的创业计划书
2013/12/31 职场文书
《赶海》教学反思
2014/04/20 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
中标通知书格式
2015/04/17 职场文书
关于倡议书的范文
2015/04/29 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers