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

这篇“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后手动刷新页面拦截器无效怎么解决”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。