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

在前端开发中，取消接口调用是优化用户体验、提升系统稳定性的关键手段。典型场景包括：

1. 用户操作中断：当用户快速切换页面或取消搜索时，已发送但未完成的请求需立即终止，避免后续数据覆盖新请求结果。
2. 竞态条件处理：在并发请求场景下（如自动补全输入框），后发请求可能先返回，此时需取消早发请求以避免数据混乱。
3. 资源释放：长轮询或WebSocket连接在组件卸载时未正确终止，会导致内存泄漏和无效网络消耗。
4. 错误处理优化：在请求超时或服务端异常时，主动取消可避免冗余的错误回调触发。

据统计，未处理的冗余请求会消耗前端应用30%以上的网络带宽，在移动端网络环境较差时，这一比例可能升至50%。

二、现代方案：AbortController API

2.1 核心机制

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 {
      console.error('请求失败:', err);
    }
  });
// 取消请求
controller.abort(); // 触发AbortError

2.2 关键特性

• 信号传递：通过signal属性将控制器与请求绑定
• 错误类型：取消时抛出AbortError，可通过err.name识别
• 多请求管理：单个控制器可关联多个请求，实现批量取消
  ```javascript
  const controller = new AbortController();
  const requests = [
  fetch(‘/api/1’, { signal: controller.signal }),
  fetch(‘/api/2’, { signal: controller.signal })
  ];

// 取消所有关联请求
controller.abort();

## 2.3 浏览器兼容性
| 浏览器       | 支持版本 | 备注                     |
|--------------|----------|--------------------------|
| Chrome       | 66+      | 完全支持                 |
| Firefox      | 57+      | 完全支持                 |
| Safari       | 12.1+    | 需要iOS 12.2+/macOS 10.14.4+ |
| Edge         | 79+      | 基于Chromium的版本       |
| IE           | 不支持   | 需使用polyfill方案       |
对于不支持的浏览器，可通过`abortable-fetch`等polyfill库实现兼容。
# 三、传统方案：XMLHttpRequest废弃指南
## 3.1 基础实现
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
// 设置超时取消
const timeoutId = setTimeout(() => {
  xhr.abort();
  console.log('请求超时取消');
}, 5000);
xhr.onload = function() {
  clearTimeout(timeoutId);
  console.log('请求完成');
};
xhr.send();

3.2 局限性分析

1. API设计陈旧：需手动管理超时定时器，易导致内存泄漏
2. 错误处理复杂：abort()不会触发onerror，需额外判断readyState
3. 功能缺失：不支持批量取消或信号传递机制

3.3 迁移建议

新项目应优先采用Fetch+AbortController方案，现有XMLHttpRequest代码建议逐步重构：

// 重构示例
async function fetchData(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    return await response.json();
  } catch (err) {
    clearTimeout(timeoutId);
    if (err.name !== 'AbortError') throw err;
  }
}

四、实战场景与最佳实践

4.1 组件卸载时取消请求

在React/Vue等框架中，需在组件卸载生命周期中取消请求：

// React函数组件示例
useEffect(() => {
  const controller = new AbortController();
  fetchData('/api/data', { signal: controller.signal })
    .then(data => setState(data));
  return () => controller.abort(); // 清理函数
}, []);

4.2 竞态请求处理

实现”最新请求优先”策略：

let controller = null;
async function search(query) {
  // 取消上一次请求
  if (controller) controller.abort();
  controller = new AbortController();
  try {
    const response = await fetch(`/api/search?q=${query}`, {
      signal: controller.signal
    });
    return await response.json();
  } catch (err) {
    if (err.name !== 'AbortError') throw err;
  }
}

4.3 性能优化建议

1. 请求节流：结合防抖（debounce）技术减少取消频率
2. 优先级管理：为关键请求分配独立控制器，非关键请求共享控制器
3. 监控告警：通过Performance API监控取消请求占比，优化接口设计

五、高级应用：自定义Hook实现

在React中封装可复用的取消逻辑：

function useAbortableFetch() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const controllerRef = useRef(null);
  const fetchData = async (url, options = {}) => {
    // 取消上一次请求
    if (controllerRef.current) {
      controllerRef.current.abort();
    }
    controllerRef.current = new AbortController();
    try {
      const response = await fetch(url, {
        ...options,
        signal: controllerRef.current.signal
      });
      const result = await response.json();
      setData(result);
      setError(null);
    } catch (err) {
      if (err.name !== 'AbortError') {
        setError(err);
      }
    }
  };
  useEffect(() => {
    return () => {
      if (controllerRef.current) {
        controllerRef.current.abort();
      }
    };
  }, []);
  return { data, error, fetchData };
}

六、常见问题与解决方案

6.1 取消后仍触发回调

问题：在fetch链式调用中，then/catch可能滞后执行
解决方案：使用标志位控制回调执行

let isAborted = false;
async function fetchWithCheck(url) {
  const controller = new AbortController();
  isAborted = false;
  try {
    const response = await fetch(url, { signal: controller.signal });
    if (isAborted) return;
    // 处理响应...
  } catch (err) {
    if (isAborted || err.name !== 'AbortError') {
      // 处理错误...
    }
  }
  return () => {
    isAborted = true;
    controller.abort();
  };
}

6.2 批量取消策略

实现请求队列管理：

class RequestQueue {
  constructor() {
    this.controllers = new Set();
  }
  add(controller) {
    this.controllers.add(controller);
    return () => this.remove(controller);
  }
  remove(controller) {
    this.controllers.delete(controller);
  }
  abortAll() {
    this.controllers.forEach(ctrl => ctrl.abort());
    this.controllers.clear();
  }
}
// 使用示例
const queue = new RequestQueue();
const controller1 = new AbortController();
const controller2 = new AbortController();
queue.add(controller1);
queue.add(controller2);
// 需要取消时
queue.abortAll();

七、未来展望

随着Web标准演进，取消请求的能力将进一步增强：

1. Service Worker集成：在缓存层实现请求拦截与取消
2. Stream API支持：对响应流进行精细控制
3. Observable模式：与RxJS等库深度整合

开发者应持续关注WHATWG Fetch规范更新，及时采用最新特性优化应用性能。

通过系统掌握AbortController机制及其应用场景，前端工程师能够有效解决请求冗余、竞态条件等典型问题，构建出更健壮、高效的网络交互层。建议在实际项目中建立请求管理规范，将取消逻辑纳入前端架构设计体系。