解决Vue在封装了Axios后手动刷新页面拦截器无效的问题


Posted in Javascript onNovember 08, 2018

项目类型:vue+vux+axios

刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面。直接调用接口,一切正常。

然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值。刚开始一切都是按照预期的结果来走的。就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我的脸上。一脸懵逼的我以为是接口的问题,可是在组件里面直接用console.log打印出来的数据又是对的。

解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

然后我突然想到了一个问题,直接点击页面返回的话,确实是OK的,但是如果按F5手动刷新的话,Axios并不会直接走main.js里面的拦截器代码。

后来我把拦截器放在了封装的http.js里面,结果就一切正常了,不过郁闷的是放在了外面以后,vux的提示插件没有办法用了。

打印了this指针,果不其然的undefind了,后来想到了一个比较变通的方法,我在index.html里面增加了一个var app用来存储main里面初始化的vue对象,并且在main.js里面把初始化的vue对象给赋值到windows.app上面,这样全局都可以使用了。

解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

把vux的提示代码加上window.app.$vux.toast.show 完美解决问题!

总结

以上所述是小编给大家介绍的解决Vue在封装了Axios后手动刷新页面拦截器无效的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js setTimeout 常见问题小结
Aug 13 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 #Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 #Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 #Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 #Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 #Javascript
Angular设置别名alias的方法
Nov 08 #Javascript
vue-cli安装使用流程步骤详解
Nov 08 #Javascript
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php 执行系统命令的方法
2009/07/07 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
django框架F&Q 聚合与分组操作示例
2019/12/12 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
中专生求职自荐信范文
2013/12/22 职场文书
师范生见习自我总结
2015/06/23 职场文书
团队拓展训练感想
2015/08/07 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
小程序实现侧滑删除功能
2022/06/25 Javascript