如何取消axios重复请求

1. 首先我们要知道，如何取消请求：

Asios是一个基于Promise的http客户端，同时支持浏览器的Node.js环境

是一个有效的HTTP客户端，被广泛的应用在大量的Web项目中，对于浏览器环境来说

Axios底层是利用XMLHttpRequest对象来发起HTTP请求，如果要取消请求的话

我们可以通过调用XMLHttpRequest对象上的abort方法来取消请求

具体代码如示：

let xhr = new XMLHttpRequest();
xhr.open("GET","https://developer.mozilla.org/",true);
xhr.send();
setTimeout(()=> xhr.abort(),300);

而对于Axios来说我们可以通过Axios内部提供的CancelToken来取消请求

const CanceToken = axios.CancelToken;
const souce = CancelToken.source();

axios.post('/user/12345',{
   name:'semlinker'
},{
    cancelToken: souce.token
}) 

source.cancel('Operation canceled by the user') //取消请求，参数是可选的

此外 也可以通过调用CancelToken的构造函数来创建 CancelToken

具体代码如下：

现在我们已经知道在Axios中如何CancelToken来取消请求了

2. 判断如何取消重复请求

当请求方式 请求URL地址和请求参数都一样时，我们就可以认为请求是一样的

因此在每次发送i请求时，我们可以根据当前请求的请求方式，请求url和请求参数来生成一个唯一的key

同时为每个请求创建一个专属的CancelToken，然后把key和cancel函数以键值对的形式保存到Map对象中，使用Map的好处是可以快速的判断是否有重复的请求。

具体代码如下：

出现重复请求的时候，我们就可以使用cancel函数来取消前面已经发出的请求，在取消请求之后

我们还需要把取消的请求从pendingRequest中移除。

现在我们已经知道如何取消请求和如何判断重复请求，下面为您来介绍如何取消重复请求

因为我们需要对所以的请求都进行处理，所以我们可以考虑使用Axios的拦截器机制来实现取消重复请求的功能。

Axios为开发者提供了请求拦截器和响应拦截器，作用如下：

请求拦截器：该类拦截器的作用是在请求发送前统一指向某些操作。

比如在请求头中添加token字段

响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作。

比如发现响应状态为401时，自动跳转为登录页。

在配置请求拦截器和响应拦截器前先来定义3个辅助函数

第一个：generateReqkey

用于根据当前请求的信息 生成请求key

第二个：addPendingRequest

用于把当前请求信息添加到pendingRequest对象中

第三个：removeRendingRequest

检查是否存在重复请求，若存在则取消已发的请求

请求拦截器如图代码：

响应拦截器如图代码