JavaScript 中怎么用 AbortController 处理并发冲突自动取消-js教程-PHP中文网

abortcontroller 是用于主动中止异步操作的标准 api，核心是新请求发起时自动取消上一个未完成请求，适用于搜索联想、分页加载等场景，并可扩展至定时器、websocket 等非 fetch 操作。

javascript 中怎么用 abortcontroller 处理并发冲突自动取消

AbortController 是 JavaScript 中用于主动中止异步操作（如 fetch、setTimeout、Promise 等）的标准 API。处理“并发冲突自动取消”，核心思路是：**当新请求发起时，自动取消上一个尚未完成的请求**，避免旧响应覆盖新请求结果或造成状态错乱。

用 AbortController 实现请求级自动取消

这是最常见场景，比如搜索框输入联想、下拉刷新、分页加载等。每次新请求发出前，先调用 abort() 终止上一次未完成的请求：

为每次请求创建独立的 AbortController 实例
将 controller.signal 传入 fetch 的 signal 选项
在发起新请求前，检查并调用上一个 controller 的 abort()

示例代码：

let currentController = null;

async function fetchSearchResults(query) {
  // 取消上一次请求（如果存在且未完成）
  if (currentController) currentController.abort();

  // 创建新控制器
  currentController = new AbortController();
  
  try {
    const res = await fetch(`/api/search?q=${query}`, {
      signal: currentController.signal
    });
    const data = await res.json();
    return data;
  } catch (err) {
    if (err.name === 'AbortError') {
      // 被主动取消，静默忽略（不报错）
      return null;
    }
    throw err;
  }
}

封装成可复用的取消钩子（React 场景）

在 React 中，常配合 useEffect 和依赖变化实现自动取消。关键点是：每次 effect 执行时，清理函数中调用 abort()，确保组件卸载或依赖变更时旧请求被终止：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

在 useEffect 内部新建 AbortController
把 fetch 或其他异步操作放在 effect 中，并传入 signal
返回的清理函数调用 controller.abort()

示例（React 函数组件）：

function SearchList({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    const controller = new AbortController();

    async function load() {
      try {
        const res = await fetch(`/api/search?q=${query}`, {
          signal: controller.signal
        });
        const data = await res.json();
        setResults(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('请求失败:', err);
        }
      }
    }

    if (query) load();

    // 组件更新或卸载时自动取消
    return () => controller.abort();
  }, [query]);

  return

{item.name}

; }

扩展支持非 fetch 操作（如定时器、自定义 Promise）

AbortSignal 不仅用于 fetch，还可监听 abort 事件，手动控制任意异步逻辑：

用 signal.addEventListener('abort', handler) 监听取消
在 handler 中清理资源（如清除 setTimeout、关闭 WebSocket、中断 Canvas 动画等）
也可用 signal.throwIfAborted() 在任意位置抛出 AbortError

示例（取消延时任务）：

function delayedTask(ms, controller) {
  const timeoutId = setTimeout(() => {
    console.log('任务执行');
  }, ms);

  controller.signal.addEventListener('abort', () => {
    clearTimeout(timeoutId);
    console.log('任务已取消');
  });
}

// 使用
const controller = new AbortController();
delayedTask(3000, controller);

// 1 秒后取消
setTimeout(() => controller.abort(), 1000);