记一次vue项目中使用ajax拦截器遇到的问题

原创 472669624 随笔 个人学习笔记 262阅读 2018-03-16 10:53:15 举报

项目背景描述:项目使用的是vue框架,项目中用了vue+mint ui+jquery+ajax+webpack+vuex+fastclick+flexible+zepto。
有人会问,vue不就替代了jquery了吗,怎么还引入jquery增加它的负担,由于历史原因,我也是接手来的项目,在这样复杂的框架引入,我在做一个接口拦截的时候做个业务需求:那就是在用户在另一个端登录后,正在使用的端就要跳出弹框提示该帐号在另一个端登录,请重新登录的提示,用户点击确定在跳到登录页面重新登录的需求。我心想,这容易啊,在全局写个ajax拦截器就ok了,正当我觉得没问题的时候,开始写好拦截器,使用中发现有几个页面接口就是进不来拦截器,只要遇到进不了拦截器之后能调用的接口也变的没有效果了,我后来看了2个页面的区别,一个页面没引入jquery是可以进入拦截器方法的,一个引入jquery就不进入方法了,后来查看了jquery源码(我就找了ajax方法粗略看了一下)原来是jquery又把我写的拦截器重新改写了,导致我写的拦截器失效了。问题找到了,那就好解决了,我本想要不就不引入jquery?不引入的话,项目中很多都用了jquery插件有了依赖,如果改起来代价很大的,决定这个方案不行;那就写一个全局ajax拦截器?这个方案可行,然后就开始写了,在全局引入这个方法,有引入jquery的页面也引入一次该方法。这样就ok了。虽然这不是最优的方案,但至少不是最差的,由于时间原因,我暂时这么处理,等项目不忙点了,我也许会把项目整体优化一下,丢弃jquery&&zepto,把ajax替换Axios等等。

1.在main.js中注册方法

2.在app.vue中引入该方法和引入jquery的页面中引入一次

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复