利用 AbortController 取消级联的异步请求：Fetch API 的取消机制实战

大家好，欢迎来到今天的专题讲座。我是你们的技术讲师，今天我们要深入探讨一个在现代前端开发中越来越重要的话题：如何利用 AbortController 来优雅地取消级联的异步请求。

如果你正在使用 Fetch API 进行网络请求（比如调用 RESTful 接口），那么你很可能遇到过这样的场景：

• 用户快速切换页面或触发多个操作；
• 前一个请求还没完成，新的请求就发起了；
• 浏览器并发执行了多个相同类型的请求，造成资源浪费甚至逻辑错误；
• 最坏的情况是：旧请求完成后更新了 UI，而新请求的结果却晚于旧结果，导致界面显示混乱。

这些问题的核心在于——缺乏对异步请求的有效控制能力。

而 AbortController 正是为了解决这个问题而生的！它是 Web 标准中的一项强大功能，自 2017 年起被广泛支持（Chrome 59+, Firefox 53+ 等主流浏览器均已实现）。它提供了一种“主动中断”正在进行中的 fetch 请求的方式，特别适用于复杂、嵌套或链式调用的请求流程。

---

一、为什么需要取消请求？常见问题与痛点

让我们先看几个真实场景：

场景	描述	不取消的问题
搜索建议	用户输入关键词时实时发送请求获取推荐词	输入“a”→“ab”→“abc”，前一个请求可能比后一个晚返回，UI 显示错乱
分页加载	点击不同页码加载数据	快速点击多页，多个请求并行执行，最后一页数据覆盖前面的数据
表单提交 + 文件上传	提交表单后同时上传文件	若用户中途离开页面，未完成的上传仍占用带宽和服务器资源

这些都不是小问题，而是典型的“竞态条件”（Race Condition）问题。如果我们不能及时终止无效请求，就会出现：

• 性能下降（不必要的网络流量）
• 数据不一致（旧数据覆盖新数据）
• 内存泄漏（监听器、闭包未释放）

所以，掌握 AbortController 是每位前端工程师必备技能！

---

二、什么是 AbortController？核心原理

AbortController 是一个标准接口，定义在 window 或 globalThis 上（Node.js 中可通过 node-fetch 或原生 Node.js v18+ 支持）。

它的设计非常简洁：

const controller = new AbortController();
const signal = controller.signal;

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data));

// 后续可以随时取消这个请求
controller.abort(); // 触发 abort 事件，fetch 失败并抛出 DOMException: "AbortError"

关键点总结：

组件	类型	功能
AbortController	构造函数	创建控制器实例
.signal	Read-only 属性	用于传给 fetch / XMLHttpRequest 等 API，作为取消信号
.abort()	方法	主动触发取消动作，所有关联请求立即停止

✅ 注意：fetch 接受 signal 参数后，会自动监听该信号。一旦调用 .abort()，fetch 会立刻中断底层连接，并将 Promise 拒绝（reject），错误类型为 DOMException，name 是 "AbortError"。

---

三、实战案例 1：搜索建议（防抖 + 取消）

这是一个非常经典的例子。我们来模拟一个带防抖的搜索框，每次输入都发起请求获取建议词，但必须确保旧请求被取消。

function createSearchSuggestion(inputElement, apiEndpoint) {
  let currentRequest = null; // 存储当前活跃的请求对象

  inputElement.addEventListener('input', (event) => {
    const query = event.target.value.trim();

    // 如果已有请求，则取消它
    if (currentRequest) {
      currentRequest.abort();
      console.log('旧请求已取消');
    }

    if (!query) {
      renderSuggestions([]);
      return;
    }

    // 创建新的 AbortController
    const controller = new AbortController();
    const signal = controller.signal;

    // 发起新请求
    currentRequest = fetch(`${apiEndpoint}?q=${encodeURIComponent(query)}`, {
      signal,
      headers: { 'Content-Type': 'application/json' }
    });

    currentRequest
      .then(res => res.json())
      .then(data => {
        // 只有当前请求有效才渲染结果（防止竞态）
        if (currentRequest === fetch(`${apiEndpoint}?q=${encodeURIComponent(query)}`, { signal })) {
          renderSuggestions(data);
        }
      })
      .catch(err => {
        if (err.name !== 'AbortError') {
          console.error('请求失败:', err.message);
        }
      });
  });
}

function renderSuggestions(suggestions) {
  const container = document.getElementById('suggestions');
  container.innerHTML = suggestions.map(item => `<li>${item}</li>`).join('');
}

📌 关键技巧说明：

• 使用 currentRequest 记录当前活跃的 fetch 对象；
• 每次输入前判断是否已有请求，若有则调用其 .abort()；
• 在 .then 中再次校验请求是否还是最新发出的那个（避免竞态）；

这样就能保证：

• 用户输入快时不会堆积多个请求；
• 新请求不会覆盖旧请求的结果；
• 页面响应更流畅、准确。

---

四、实战案例 2：级联请求（父子关系链式调用）

假设我们有一个订单系统，用户选择地区 → 获取城市列表 → 获取区县列表。

这种结构天然适合级联调用，但如果用户中途取消或跳转，就需要中断整个链条。

async function fetchCitiesAndDistricts(regionId) {
  const controller = new AbortController();
  const signal = controller.signal;

  try {
    // 第一步：获取城市
    const citiesRes = await fetch(`/api/cities?region=${regionId}`, { signal });
    if (!citiesRes.ok) throw new Error('Failed to fetch cities');

    const cities = await citiesRes.json();

    // 第二步：逐个获取每个城市的区县（串行）
    const districts = [];
    for (const city of cities) {
      if (signal.aborted) break; // 检查是否已被取消

      const distRes = await fetch(`/api/districts?city=${city.id}`, { signal });
      if (!distRes.ok) continue;

      const district = await distRes.json();
      districts.push({ city: city.name, districts: district });
    }

    return districts;
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('请求被用户取消');
      return null;
    }
    throw err;
  }
}

// 使用示例
const button = document.getElementById('loadData');
button.addEventListener('click', async () => {
  const regionInput = document.getElementById('region').value;

  const result = await fetchCitiesAndDistricts(regionInput);
  if (result) {
    console.log('最终结果:', result);
  }
});

// 添加取消按钮
document.getElementById('cancelBtn').addEventListener('click', () => {
  // 这里需要保存 controller 实例才能取消
  // 所以要改成全局变量或类封装
});

⚠️ 注意：

• 我们把 AbortController 传递给了每一步 fetch；
• 在循环中也检查 signal.aborted，这是必要的，因为即使外部取消了，内部循环也可能还在运行；
• 如果你想让用户能随时点击“取消”，你需要把 controller 保存起来（例如放在组件状态中）。

✅ 更好的做法是封装成类：

class CascadeFetcher {
  constructor() {
    this.controller = null;
  }

  async fetchCitiesAndDistricts(regionId) {
    this.controller = new AbortController();
    const signal = this.controller.signal;

    try {
      const citiesRes = await fetch(`/api/cities?region=${regionId}`, { signal });
      const cities = await citiesRes.json();

      const districts = [];
      for (const city of cities) {
        if (signal.aborted) break;
        const res = await fetch(`/api/districts?city=${city.id}`, { signal });
        const data = await res.json();
        districts.push({ city: city.name, districts: data });
      }

      return districts;
    } catch (err) {
      if (err.name === 'AbortError') {
        console.log('级联请求已取消');
        return null;
      }
      throw err;
    }
  }

  cancel() {
    if (this.controller) {
      this.controller.abort();
      this.controller = null;
    }
  }
}

现在你可以这样用：

const fetcher = new CascadeFetcher();

document.getElementById('startBtn').onclick = async () => {
  const result = await fetcher.fetchCitiesAndDistricts(123);
  if (result) renderResult(result);
};

document.getElementById('cancelBtn').onclick = () => {
  fetcher.cancel();
};

这种方式清晰、可控、易维护，非常适合复杂的业务流程。

---

五、高级技巧：结合 React / Vue 等框架的生命周期管理

在 React 中，我们经常会在 useEffect 中发起请求。如果不处理取消逻辑，可能会出现组件卸载后仍试图更新状态的问题。

React 示例（useEffect + AbortController）

import React, { useState, useEffect, useRef } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const controllerRef = useRef(null); // 保存 AbortController 实例

  useEffect(() => {
    // 清理旧请求
    if (controllerRef.current) {
      controllerRef.current.abort();
    }

    if (!query) {
      setResults([]);
      return;
    }

    controllerRef.current = new AbortController();
    const signal = controllerRef.current.signal;

    fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal })
      .then(res => res.json())
      .then(data => {
        // 防止旧请求污染新结果
        if (controllerRef.current && controllerRef.current.signal.aborted) return;
        setResults(data);
      })
      .catch(err => {
        if (err.name !== 'AbortError') {
          console.error('搜索失败:', err.message);
        }
      });

    // 清理函数：组件卸载时取消请求
    return () => {
      if (controllerRef.current) {
        controllerRef.current.abort();
      }
    };
  }, [query]);

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="输入搜索关键词" />
      <ul>
        {results.map((item, i) => <li key={i}>{item.title}</li>)}
      </ul>
    </div>
  );
}

💡 重点总结：

• 使用 useRef 保存控制器；
• 每次输入变化时重新创建 controller；
• 组件卸载时务必调用 .abort()；
• 避免在已卸载组件上调用 setState，防止内存泄漏。

Vue 也可以类似处理，只是语法稍有不同，但原理一致。

---

六、性能对比：启用取消 vs 不启用取消

为了直观感受 AbortController 的价值，我们可以做一个简单测试：

方案	请求数量	平均延迟	是否浪费资源	是否有竞态风险
不使用 AbortController	5~10 次	300ms ~ 800ms	❌ 是	❌ 是
使用 AbortController	仅保留最新一次	< 200ms	✅ 否	✅ 否

通过减少冗余请求，不仅提升了用户体验，还降低了服务器压力和客户端内存占用。

---

七、最佳实践建议（总结）

场景	推荐做法
单次请求	直接使用 new AbortController() + .abort()
防抖搜索	用 ref 或变量记录当前请求，每次新请求前取消旧的
级联请求	将 signal 传递到每一层，显式检查 .aborted
React/Vue 组件	在 effect cleanup 中调用 .abort()
错误处理	捕获 AbortError，不报错日志，只提示“用户取消”即可
测试	使用 Jest + Mock 调用 .abort() 来验证行为

---

结语：拥抱现代 JavaScript 的取消机制

今天我们深入讲解了 AbortController 的本质、应用场景和最佳实践。它不仅是 Fetch API 的一部分，更是构建健壮异步系统的基石。

记住一句话：

“不要让用户的每一次点击都变成一场无法控制的风暴。”

学会合理使用 AbortController，不仅能写出更高效、更安全的代码，还能显著提升产品的专业度和用户体验。

希望今天的分享对你有所启发！如果你还有疑问，欢迎留言讨论。下节课再见！