解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
89 浏览量
2020-10-17
18:30:36
上传
评论
收藏 47KB PDF 举报
解决解决Vue在封装了在封装了Axios后手动刷新页面拦截器无效的问题后手动刷新页面拦截器无效的问题
主要介绍了解决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后手动刷新页面拦截器无效的问题，希望对大家有所帮助，如果大家有
任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
资源评论
