如何防止重复发送ajax请求

作者 | 周浪

背景

先来说说重复发送ajax请求带来的问题

• 场景一：用户快速点击按钮，多次相同的请求打到服务器，给服务器造成压力。如果碰到提交表单操作，而且恰好后端没有做兼容处理，那么可能会造成数据库中插入两条及以上的相同数据

• 场景二：用户频繁切换下拉筛选条件，第一次筛选数据量较多，花费的时间较长，第二次筛选数据量较少，请求后发先至，内容先显示在界面上。但是等到第一次的数据回来之后，就会覆盖掉第二次的显示的数据。筛选结果和查询条件不一致，用户体验很不好

常用解决方案

为了解决上述问题，通常会采用以下几种解决方案

• 状态变量

  发送ajax请求前，btnDisable置为true，禁止按钮点击，等到ajax请求结束解除限制，这是我们最常用的一种方案但该方案也存在以下弊端：

• • 与业务代码耦合度高

  • 无法解决上述场景二存在的问题

• 函数节流和函数防抖

  固定的一段时间内，只允许执行一次函数，如果有重复的函数调用，可以选择使用函数节流忽略后面的函数调用，以此来解决场景一存在的问题也可以选择使用函数防抖忽略前面的函数调用，以此来解决场景二存在的问题该方案能覆盖场景一和场景二，不过也存在一个大问题：

• • wait time是一个固定时间，而ajax请求的响应时间不固定，wait time设置小于ajax响应时间，两个ajax请求依旧会存在重叠部分，wait time设置大于ajax响应时间，影响用户体验。总之就是wait time的时间设定是个难题

请求拦截和请求取消

作为一个成熟的ajax应用，它应该能自己在pending过程中选择请求拦截和请求取消

• 请求拦截

  用一个数组存储目前处于pending状态的请求。发送请求前先判断这个api请求之前是否已经有还在pending的同类，即是否存在上述数组中，如果存在，则不发送请求，不存在就正常发送并且将该api添加到数组中。等请求完结后删除数组中的这个api。

• 请求取消

  用一个数组存储目前处于pending状态的请求。发送请求时判断这个api请求之前是否已经有还在pending的同类，即是否存在上述数组中，如果存在，则找到数组中pending状态的请求并取消，不存在就将该api添加到数组中。然后发送请求，等请求完结后删除数组中的这个api

实现

接下来介绍一下本文的主角 axios 的 cancel token(查看详情)。通过axios 的 cancel token，我们可以轻松做到请求拦截和请求取消

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


axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }