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

 更新时间:2018年11月08日 16:26:44   作者:茶树虾   我要评论

这篇文章主要介绍了解决VUE在封装了Axios后手动刷新页面拦截器无效的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

项目类型: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-cli脚手架引入图片的几种方法总结

    vue-cli脚手架引入图片的几种方法总结

    下面小编就为大家分享一篇vue-cli脚手架引入图片的几种方法总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue中简单弹框dialog的实现方法

    vue中简单弹框dialog的实现方法

    下面小编就为大家分享一篇vue中简单弹框dialog的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue2.0.js的多级联动选择器实现方法

    vue2.0.js的多级联动选择器实现方法

    下面小编就为大家分享一篇vue2.0.js的多级联动选择器实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue.js划分组件的方法

    Vue.js划分组件的方法

    这篇文章主要介绍了Vue.js划分组件的方法,需要的朋友可以参考下
    2017-10-10
  • 使用淘宝镜像cnpm安装Vue.js的图文教程

    使用淘宝镜像cnpm安装Vue.js的图文教程

    今天小编就为大家分享一篇使用淘宝镜像cnpm安装Vue.js的图文教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • 详解10分钟学会vue滚动行为

    详解10分钟学会vue滚动行为

    本篇文章主要介绍了vue滚动行为,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 深入理解Vue官方文档梳理之全局API

    深入理解Vue官方文档梳理之全局API

    本篇文章主要介绍了深入理解Vue官方文档梳理之全局API,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue组件之Tooltip的示例代码

    Vue组件之Tooltip的示例代码

    这篇文章主要介绍了Vue组件之Tooltip的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript的MVVM库Vue.js入门学习笔记

    JavaScript的MVVM库Vue.js入门学习笔记

    这篇文章主要介绍了JavaScript的MVVM库Vue.js入门学习笔记,Vue.js是一个新兴的js库,主要用于实现响应的数据绑定和组合的视图组件,需要的朋友可以参考下
    2016-05-05
  • Vue2.0系列之过滤器的使用

    Vue2.0系列之过滤器的使用

    这篇文章主要介绍了Vue2.0系列之过滤器的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论