vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求

时间:2024-05-30 19:27:19

一、 抛出问题

1、当一个页面的请求过长时,点击了跳转路由到新的页面,但是上一个路由的请求结果在当前路由页面提示,非常难看且容易让客户混淆。(所以需要路由跳转取消上个路由页面的所有请求
2、在当前页面某个请求长时间没拿到返回结果,然后用户又点击发起了相同请求,这时有可能后发送的请求返回的数据被先发送的请求覆盖,这样就得不到最新请求数据了。(所以需要取消当前路由页面的重复请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖)

二、解决问题

1、因为要取消多个请求,所以需要把请求存在数组中,这里我使用了vuex来管理
在state.js中新建个变量axiosPromiseCancel:
vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求
2、在mutations.js中定义好设置axiosPromiseCancel 和 取消axiosPromiseCancel请求的方法
vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求
3、在axios 拦截器封装的js中----------保存请求到数组中 和 取消数组中重复的请求
注意:红色方框中的代码都是重点
vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求4、在路由全局前置守卫中取消数组中的所有请求(即上个路由页面所保存在数组中的请求)
vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求

三、效果图

1、取消当前页面触发的重复请求(取消之前重复的)
当连续发起相同请求时,因为上一个请求还在pending状态所以直接取消了,然后使用最新发起的请求。
vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求2、路由跳转页面,取消上一个路由页面的所有请求
如果上一个路由页面的请求还在pending中则直接全部canceled,如果已经成功200,那么没影响
vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求

参考资料:
https://www.cnblogs.com/zhaofeis/p/11422777.html
https://juejin.im/post/5c3ea11c51882525aa507f0d