AbortController 入门：前端请求取消的最佳实践

下面是一个典型的搜索防抖示例。每次用户输入时，我们先检查是否有未完成的请求，如果有则先取消，再发起新的请求。

let currentController = null;

function search(query) {
  // 1. 取消之前的请求
  if (currentController) {
    currentController.abort();
  }

  // 2. 创建新的控制器
  currentController = new AbortController();
  const { signal } = currentController;

  // 3. 发起新请求
  fetch(`/api/search?q=${query}`, { signal })
    .then(res => res.json())
    .then(data => renderResults(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        console.error('Search failed:', err);
      }
    });
}

// 监听输入事件
inputElement.addEventListener('input', (e) => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => search(e.target.value), 500);
});

注意这里我们在每次新请求前都调用了 abort()，确保不会有多余的请求堆积。同时，在 catch 块中判断错误类型，忽略因取消导致的报错，只处理真正的网络异常。

常见问题解答

Q: 取消请求后会发生什么？ A: 请求会被立即终止，Promise 会拒绝并抛出 AbortError。你需要在 catch 块中捕获并处理这个错误，避免影响后续逻辑。

Q: 一个 AbortController 可以取消多个请求吗？ A: 可以。只要这些请求都使用了同一个 signal 对象，调用一次 abort() 就能同时取消所有关联的请求。

Q: 取消请求会影响性能吗？ A: 不会，反而能节省带宽和服务器资源。及时取消无效请求可以减少不必要的网络开销。

进阶技巧与注意事项

除了基础用法，还有一些进阶场景值得注意：

1. 超时自动取消：结合 setTimeout 设置请求超时时间，防止请求挂起。
2. 框架集成：在 React/Vue 等框架中，配合 useEffect 或生命周期钩子清理函数使用，组件卸载时自动取消请求。
3. 兼容性：虽然现代浏览器支持良好，但在极老版本中可能需要 polyfill。
4. 不可恢复性：一旦调用 abort()，该请求无法恢复，必须重新发起。

合理使用请求取消功能，不仅能提升应用性能，还能显著改善用户体验。希望这篇教程能帮你更好地掌握 AbortController 的使用。