axios如何取消重复无用的请求详解

当我们使用 axios 发送请求时，可能会出现多次发送同样的请求，这种情况可能会降低我们应用的性能。因此我们需要控制请求的发送，以避免重复无用的请求。

使用 axios 取消请求有 3 种方式：

1. 使用 CancelToken 取消请求。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/api/getData', {
  cancelToken: new CancelToken((c) => {
    cancel = c;
  }),
});

// 如果需要取消请求： cancel()

上述代码中，我们定义了一个 CancelToken，每个 CancelToken 都可以用来取消一个请求。axios 请求的 config 对象中有一个 cancelToken 属性，可以设置该请求的 CancelToken 对象。

通过执行 cancel() 方法可以取消请求。但是，对于每次需要取消请求的地方，都得要冗余地调用 cancel() 方法。如果程序中存在多个地方需要取消请求，每个地方都要写上 cancel() 方法，那么就会显得非常麻烦。

1. 使用 axios 执行多个请求，如果请求中有一个请求失败了，则终止所有请求。

axios.all([request1, request2, request3]).then(
  axios.spread((res1, res2, res3) => {
    // 处理所有请求的响应结果
  })
);

上述代码中，我们使用 axios.all() 方法可以同时执行多个请求，所有请求都完成后，我们就可以通过 axios.spread() 方法将每个请求的响应结果作为参数传入回调函数中依次处理。当某一个请求的响应失败时，所有请求都会被终止，这种方式非常适合发送多个请求，但是只要有一个失败就无需再继续操作的情况。

1. 使用请求列表和 CancelToken 取消请求。

第三种方法是通过维护一个请求列表，判断请求是否重复，并且可以控制请求的创建和取消，从而避免重复无用的请求。

// 维护一个所有请求的列表
const requests = [];

// 取消请求的方法
function cancelRequest(request) {
  const index = requests.indexOf(request);
  if (index !== -1) {
    requests.splice(index, 1);
    request.cancel();
  }
}

// 发送请求的方法
function sendRequest(url) {
  // 取消当前正在发送的同样的请求
  const sameRequest = requests.find((r) => r && r.url === url);
  if (sameRequest) {
    cancelRequest(sameRequest);
  }

  // 创建新的请求
  const source = axios.CancelToken.source();
  const newRequest = axios.get(url, { cancelToken: source.token });

  // 将请求加入列表
  requests.push(newRequest);

  // 处理请求结果
  return newRequest.then((res) => {
    // 从请求列表中移除该请求
    const index = requests.indexOf(newRequest);
    if (index !== -1) {
      requests.splice(index, 1);
    }
    return res.data;
  });
}

上述代码中，我们维护了一个 requests 列表，用于存放当前还在发送的请求。我们还定义了一个 cancelRequest() 方法用于取消请求。当我们要发送一个新的请求时，如果当前列表中已经有同样的请求在发送中，则我们需要取消已经在发送的请求(cancelRequest(sameRequest))，然后创建一个新的请求，并将其加入到 requests 列表中。在请求成功后，我们需要从请求列表中移除该请求，以便下次发送同样的请求时不会误认为已经在发送中。

示例说明：

例如，我们想通过 axios 发送一条消息给服务器：

sendRequest('/api/sendMessage', { msg: 'hello' });

我们再次发送相同的请求：

sendRequest('/api/sendMessage', { msg: 'hello' });

此时，第二次请求会被取消，从而避免了重复无用的请求。