解决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 多浏览器兼容总结(实战经验)
Oct 30 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
Typescript的三种运行方式(小结)
Sep 18 Javascript
js实现图片上传到服务器和回显
Jan 19 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
我的论坛源代码(三)
2006/10/09 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
js实现中文实时时钟
2020/01/15 Javascript
python求列表交集的方法汇总
2014/11/10 Python
Python脚本实现网卡流量监控
2015/02/14 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python程序运行原理图文解析
2018/02/10 Python
对Python3中的input函数详解
2018/04/22 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
项目申报专员岗位职责
2014/07/09 职场文书
英语复习计划
2015/01/19 职场文书
小学运动会加油词
2015/07/18 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
MySQL修炼之联结与集合浅析
2021/10/05 MySQL