终止正在进行的axios请求

在处理重复请求时，通常需要终止之前的请求，以确保只保留最新的请求。以下是使用 Axios 的 CancelToken 或 AbortController 来实现终止重复请求的示例。

方法 1：使用 CancelToken（适用于旧版 Axios）

const axios = require('axios');

let cancel; // 用于存储取消函数

function fetchData() {
  // 如果存在之前的请求，取消它
  if (cancel) {
    cancel('取消之前的请求');
  }

  // 发起新的请求
  axios.get('https://jsonplaceholder.typicode.com/posts', {
    cancelToken: new axios.CancelToken(function executor(c) {
      // 将取消函数赋值给 cancel 变量
      cancel = c;
    })
  })
  .then(response => {
    console.log('Response:', response.data);
    cancel = null; // 请求完成后清空取消函数
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求被取消:', error.message);
    } else {
      console.log('请求出错:', error);
    }
  });
}

// 模拟重复请求
fetchData(); // 第一次请求
setTimeout(fetchData, 1000); // 1 秒后发起第二次请求，取消第一次

方法 2：使用 AbortController（推荐，适用于新版 Axios）

const axios = require('axios');

let controller; // 用于存储 AbortController 实例

function fetchData() {
  // 如果存在之前的请求，取消它
  if (controller) {
    controller.abort('取消之前的请求');
  }

  // 创建新的 AbortController 实例
  controller = new AbortController();

  // 发起新的请求
  axios.get('https://jsonplaceholder.typicode.com/posts', {
    signal: controller.signal // 传递 signal
  })
  .then(response => {
    console.log('Response:', response.data);
    controller = null; // 请求完成后清空 controller
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求被取消:', error.message);
    } else {
      console.log('请求出错:', error);
    }
  });
}

// 模拟重复请求
fetchData(); // 第一次请求
setTimeout(fetchData, 1000); // 1 秒后发起第二次请求，取消第一次

关键点：

1. 取消之前的请求：

   • 在发起新请求之前，检查是否存在之前的请求（通过 cancel 或 controller），如果存在则取消它。

2. 清理状态：

   • 请求完成后，将 cancel 或 controller 置为 null，避免误取消。

3. 错误处理：

   • 使用 axios.isCancel(error) 检查错误是否由取消请求引起。

适用场景：

• 搜索框输入时，用户连续输入内容，需要取消之前的请求，只保留最新的请求。
• 分页或选项卡切换时，取消未完成的请求，避免数据混乱。

注意事项：

• 如果使用的是 Axios 0.22.0 及以上版本，推荐使用 AbortController，因为 CancelToken 已被弃用。
• 确保在请求完成后清理状态（如将 cancel 或 controller 置为 null），避免内存泄漏或不必要的取消操作。