Axios取消重复请求实现

在我们日常开发中，有这样一种场景必须要进行处理，那就是在提交表单的时候，如果很快的重复点击两次，会造成重复请求，第二次请求就会报错，给用户带来很不好的体验，同时如果后端没有加以控制，也容易造成数据重复。所以我们需要对这种重复请求进行处理和控制。

axios是现在前端项目开发中必用的一个用于前端后网络请求的工具，它是基于ajax和promise封装而成，很受欢迎。

那么，今天就结合axios来实现一下如何取消重复请求。

思路整理

取消重复请求的思路就是，将每一次请求的url、method、params、data拼接起来组成一个key,然后添加到map中，下一次请求时就拿key在map中查找是否已存在，如果存在就表示重复请求，就取消，如果不存在就放行，等请求成功后在从map中删除这个key。

axios中如何取消请求

• 普通请求取消
  在普通的ajax中，是通过XMLHttpRequest的abort()方法实现取消请求的。

var ajax = new XMLHttpRequest();
ajax.open('GET', '/abc');
ajax.send();
setTimeout(() => {
   
  ajax.abort(); // 取消当前请求
}, 300);

• axios请求取消
  axios中是通过CancelToken给每个请求添加一个cancelToken属性,使得每个请求具备取消请求的能力。有两种方法实现：

// 方式一:
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
   
  cancelToken: source.token
}).then(res => {
   });

// cancel方法里面的参数是可选参数
source.cancel('取消请求');

// 方式二：
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
   
  cancelToken: new CancelToken(function executor(c) {
   
    // 这里的c就是取消当前请求的方法，这里把c赋值给cancel变量
    cancel = c;
  })
});
// 调用取消方法
cancel(