解决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所必须要知道的一些
Mar 07 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
js实现圆盘记速表
Aug 03 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
Vue 请求传公共参数的操作
Jul 31 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
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
Git命令之分支详解
2021/03/02 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
再论Javascript的类继承
2011/03/05 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python实现键盘输入的实操方法
2019/07/16 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
毕业生如何写自我鉴定
2014/03/15 职场文书
百日安全生产活动总结
2014/07/05 职场文书
党员个人剖析材料
2014/09/30 职场文书
论语读书笔记
2015/06/26 职场文书
天气温馨提示语
2015/07/14 职场文书
golang 实现并发求和
2021/05/08 Golang
vue elementUI表格控制对应列
2022/04/13 Vue.js
SQL Server 中的事务介绍
2022/05/20 SQL Server
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python