解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018-12-03 09:26
1101 查看
项目类型: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上面,这样全局都可以使用了。
把vux的提示代码加上window.app.$vux.toast.show
完美解决问题!
总结
以上所述是小编给大家介绍的解决Vue在封装了Axios后手动刷新页面拦截器无效的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 解决vue 路由变化页面数据不刷新的问题
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
- 解决vue页面刷新或者后退参数丢失的问题
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- 解决vue+element 键盘回车事件导致页面刷新的问题
- 解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
- 完美解决ie浏览器location.href不刷新页面的问题,进入页面只刷新一次
- 解决采用nginx反向代理tomcat时JSP动态页面不刷新问题
- 用脚本解决ASP.NET页面刷新问题
- requirejs页面刷新失效js报错问题解决方案
- Vue 2.0在IE11中打开项目页面空白的问题解决
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
- 在Asp.net 2.0 中禁用页面缓存解决页面刷新(重新加载数据)的问题!
- JavaScript页面刷新与弹出窗口问题解决方法
- 关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题
- 解决后台提交表单数据时,重复F5刷新页面出现重复提交数据的问题。
- asp.net刷新页面定位问题的解决方法