一、为什么需要取消接口调用？

在前端开发中，取消接口调用是优化用户体验与资源管理的关键技术。当用户快速切换页面、输入搜索关键词或提交表单时，未完成的异步请求可能导致以下问题：

1. 数据不一致：后端返回的旧数据覆盖新请求结果
2. 性能浪费：无效请求占用带宽和服务器资源
3. 竞态风险：多个请求交叉执行导致逻辑错误
4. 内存泄漏：未清理的请求持续占用内存

典型场景包括：

• 搜索框实时联想（用户快速输入时取消前序请求）
• 表格分页加载（切换页码时取消当前请求）
• 表单提交（防止重复提交）
• 路由跳转（组件卸载时取消未完成请求）

二、浏览器原生解决方案：AbortController

2.1 基本用法

ES2021引入的AbortController是取消Fetch API的标准方案：

const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已取消');
    } else {
      throw err;
    }
  });
// 取消请求
controller.abort();

2.2 核心特性

• 信号传递：通过signal对象关联控制器与请求
• 多请求管理：单个控制器可关联多个请求

  const controller = new AbortController();
  ['/data1', '/data2'].forEach(url => {
  fetch(url, { signal: controller.signal });
  });
  // 调用controller.abort()将取消所有关联请求

• 超时控制：结合setTimeout实现自动取消

  function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  return fetch(url, { signal: controller.signal })
    .finally(() => clearTimeout(timeoutId));
  }

三、主流库的取消实现

3.1 Axios取消机制

Axios通过CancelToken（旧版）和AbortController（新版）支持请求取消：

3.1.1 传统CancelToken方式

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/123', {
  cancelToken: source.token
}).catch(err => {
  if (axios.isCancel(err)) {
    console.log('请求已取消:', err.message);
  }
});
// 取消请求
source.cancel('用户主动取消');

3.1.2 现代AbortController方式

const controller = new AbortController();
axios.get('/user/123', {
  signal: controller.signal
}).catch(err => {
  if (axios.isCancel(err)) { // 注意：axios 5.x+需要检查err.name === 'CanceledError'
    console.log('请求已取消');
  }
});
controller.abort();

3.2 jQuery AJAX取消

const xhr = $.ajax({
  url: '/api/data',
  success: function(data) {}
});
// 取消请求
xhr.abort();

四、框架中的最佳实践

4.1 React Hooks实现

import { useEffect, useRef } from 'react';
function useFetch(url) {
  const controllerRef = useRef(null);
  useEffect(() => {
    controllerRef.current = new AbortController();
    fetch(url, { signal: controllerRef.current.signal })
      .then(res => res.json())
      .then(data => console.log(data));
    return () => {
      if (controllerRef.current) {
        controllerRef.current.abort();
      }
    };
  }, [url]);
}

4.2 Vue组合式API实现

import { onUnmounted, ref } from 'vue';
function useFetch(url) {
  const data = ref(null);
  const controller = new AbortController();
  fetch(url, { signal: controller.signal })
    .then(res => res.json())
    .then(d => data.value = d);
  onUnmounted(() => controller.abort());
  return { data };
}

五、高级应用场景

5.1 竞态条件处理

当多个请求竞争更新状态时，可通过请求ID标记：

let requestId = 0;
function fetchData() {
  const currentId = ++requestId;
  const controller = new AbortController();
  fetch('/data', { signal: controller.signal })
    .then(res => res.json())
    .then(data => {
      if (currentId === requestId) {
        updateState(data); // 仅处理最新请求
      }
    });
  return () => controller.abort();
}

5.2 节流与防抖结合

function debouncedFetch(url, delay = 300) {
  let timer;
  let controller;
  return async (params) => {
    if (controller) controller.abort();
    controller = new AbortController();
    clearTimeout(timer);
    timer = setTimeout(async () => {
      try {
        const res = await fetch(`${url}?${new URLSearchParams(params)}`, {
          signal: controller.signal
        });
        return await res.json();
      } catch (err) {
        if (err.name !== 'AbortError') throw err;
      }
    }, delay);
  };
}

六、注意事项与调试技巧

1. 错误处理：始终捕获AbortError避免未处理异常
2. 内存管理：组件卸载时必须取消请求
3. 浏览器兼容性：IE不支持AbortController，需polyfill
4. 服务端处理：后端应正确处理中断连接（如Node.js的clientError事件）
5. 性能监控：通过Performance API跟踪被取消请求的影响

调试工具推荐：

• Chrome DevTools的Network面板（显示取消的请求）
• Redux DevTools（跟踪请求状态变化）
• 自定义中间件记录请求生命周期

七、未来演进方向

1. Selective Abort：未来可能支持部分取消（如取消上传但保留下载）
2. 优先级队列：结合Service Worker实现请求优先级管理
3. WebTransport集成：在双向通信协议中实现更细粒度的控制

通过系统掌握这些技术，开发者能够构建出更健壮、高效的前端应用，在复杂交互场景中提供流畅的用户体验。实际开发中，建议根据项目需求选择最适合的方案，并通过单元测试验证取消逻辑的正确性。