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

一、 抛出问题

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

二、解决问题

1、因为要取消多个请求，所以需要把请求存在数组中，这里我使用了vuex来管理
在state.js中新建个变量axiosPromiseCancel：

2、在mutations.js中定义好设置axiosPromiseCancel 和 取消axiosPromiseCancel请求的方法

在这里插入图片描述
3、在axios 拦截器封装的js中----------保存请求到数组中 和 取消数组中重复的请求
注意：红色方框中的代码都是重点

4、在路由全局前置守卫中取消数组中的所有请求（即上个路由页面所保存在数组中的请求）

三、效果图

1、取消当前页面触发的重复请求（取消之前重复的）
当连续发起相同请求时，因为上一个请求还在pending状态所以直接取消了，然后使用最新发起的请求。

2、路由跳转页面，取消上一个路由页面的所有请求
如果上一个路由页面的请求还在pending中则直接全部canceled，如果已经成功200，那么没影响

参考资料：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：http://blog.****.net/m0_38134431/article/details/105204404