在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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
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
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python中的日期时间处理详解
2016/11/17 Python
同时安装Python2 & Python3 cmd下版本自由选择的方法
2017/12/09 Python
使用python模拟命令行终端的示例
2019/08/13 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
wxPython实现分隔窗口
2019/11/19 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
自荐书模板
2013/12/19 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
Django程序的优化技巧
2021/04/29 Python
详解nodejs内置模块
2021/05/06 NodeJs
Python可视化神器pyecharts绘制水球图
2022/07/07 Python