解决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 相关文章推荐
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
python字典基本操作实例分析
2015/07/11 Python
python中使用print输出中文的方法
2018/07/16 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
VC++笔试题
2014/10/13 面试题
Linux的文件类型
2012/03/07 面试题
募捐倡议书
2014/04/14 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
淘宝活动总结范文
2014/06/26 职场文书
学雷锋倡议书
2015/01/19 职场文书
岗位聘任报告
2015/03/02 职场文书
高温慰问简报
2015/07/21 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL