编程 Javascript

解决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打印出来的数据又是对的。

然后我突然想到了一个问题，直接点击页面返回的话，确实是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后手动刷新页面拦截器无效的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

茶树虾

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Js 获取当前日期时间及其它操作实现代码

Mar 04 Javascript

jquery 学习笔记传智博客佟老师附详细注释

Sep 12 Javascript

jQuery入门问答整理的几个常见的初学者问题

Feb 22 Javascript

vs2003 js文件编码问题的解决方法

Mar 20 Javascript

js防止表单重复提交的两种方法

Sep 30 Javascript

js修改input的type属性问题探讨

Oct 12 Javascript

javascript实现的右下角弹窗实例

Apr 24 Javascript

配置Grunt的Task时通配符支持和动态生成文件名问题

Sep 06 Javascript

jQuery EasyUI tree 使用拖拽时遇到的错误小结

Oct 10 Javascript

Bootstrap源码解读媒体对象、列表组和面板（10）

Dec 26 Javascript

vue+element UI实现树形表格带复选框的示例代码

Apr 16 Javascript

vue中activated的用法

Jan 03 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连接Oracle数据库

2006/10/09 PHP

PHP实现Huffman编码/解码的示例代码

2018/04/20 PHP

PHP实现的DES加密解密类定义与用法示例

2020/11/02 PHP

PHP设计模式之装饰器模式定义与用法简单示例

2018/08/13 PHP

HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高

2021/03/09 Javascript

不错的asp中显示新闻的功能

2006/10/13 Javascript

JS的反射问题

2010/04/07 Javascript

js中根据字数截取字符串，不能截断url

2012/01/12 Javascript

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

2012/12/27 Javascript

Extjs中TabPane如何嵌套在其他网页中实现思路及代码

2013/01/27 Javascript

Javascript中string转date示例代码

2013/11/01 Javascript

JavaScript中的Primitive对象封装介绍

2014/12/31 Javascript

Jquery 分页插件之Jquery Pagination

2015/08/25 Javascript

javascript实现倒计时跳转页面

2016/01/17 Javascript

webpack+vue.js实现组件化详解

2016/10/12 Javascript

基于jQuery实现选项卡效果

2017/01/04 Javascript

微信小程序设置启动页面的两种方法

2017/03/09 Javascript

AngularJS动态绑定ng-options的ng-model实例代码

2017/06/21 Javascript

详解webpack require.ensure与require AMD的区别

2017/12/13 Javascript

Nodejs libuv运行原理详解

2019/08/21 NodeJs

微信小程序实现导航栏和内容上下联动功能代码

2020/06/29 Javascript

详解vue 组件的实现原理

2020/11/12 Javascript

vue+Element-ui实现分页效果

2020/11/15 Javascript

Python2.x中文乱码问题解决方法

2015/06/02 Python

python发送告警邮件脚本

2018/09/17 Python

Django restframework 框架认证、权限、限流用法示例

2019/12/21 Python

英超联赛的首选足球：Mitre足球

2019/05/06 全球购物

建筑经济管理专业求职信分享

2014/01/06 职场文书

高中自我评价范文

2014/01/27 职场文书

体育专业求职信

2014/07/16 职场文书

联谊活动总结

2014/08/28 职场文书

初中英语教师个人工作总结

2015/02/09 职场文书

2015年采购部工作总结

2015/04/23 职场文书

员工手册编写范本

2015/05/14 职场文书

SQLServer2019 数据库环境搭建与使用的实现

2021/04/08 SQL Server

详解JVM系列之内存模型

2021/06/10 Javascript