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

一、 抛出问题

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

二、解决问题

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

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

3、在axios 拦截器封装的js中----------保存请求到数组中 和 取消数组中重复的请求
注意：红色方框中的代码都是重点
4、在路由全局前置守卫中取消数组中的所有请求（即上个路由页面所保存在数组中的请求）

三、效果图

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

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