解决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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
json对象转字符串如何实现
Dec 02 Javascript
checkbox使用示例
Aug 23 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
JS快速实现简单计算器
Apr 08 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
Python实用日期时间处理方法汇总
2015/05/09 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python yield的用法实例分析
2020/03/06 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
行政副总岗位职责
2014/02/23 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
家长对学生的评语
2014/04/18 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
合伙经营协议书范本
2014/09/13 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
话题作文之自信作文
2019/11/15 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle