JavaScript 教程：使用 AbortController 中断 Fetch 请求

颜钥杉Harriet

于 2025-06-11 09:00:22 发布

阅读量242

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00962/article/details/148574751

版权

JavaScript 教程：使用 AbortController 中断 Fetch 请求

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

理解 Fetch 请求的中断需求

在现代 Web 开发中，fetch API 是发起网络请求的主要方式。但有时我们需要中断正在进行的请求，比如用户导航离开页面或取消了操作。由于 JavaScript 的 Promise 本身不支持取消操作，我们需要借助 AbortController 来实现这一功能。

AbortController 基础

AbortController 是一个专门设计用于中断异步操作的 JavaScript 内置对象。它的工作原理非常简单：

创建控制器：

const controller = new AbortController();

控制器结构：
- abort() 方法：调用时触发中断
- signal 属性：用于监听中断事件

基本用法示例：

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

// 添加中断事件监听
signal.addEventListener('abort', () => {
  console.log('请求已被中断');
});

// 触发中断
controller.abort();
console.log(signal.aborted); // 输出: true

结合 Fetch 使用 AbortController

将 AbortController 与 fetch 结合使用非常简单：

创建控制器并传递 signal：

const controller = new AbortController();

fetch('https://api.example.com/data', {
  signal: controller.signal
});

中断请求：
```
controller.abort();
```

错误处理：当请求被中断时，fetch 会抛出一个特殊的 AbortError，我们需要捕获并处理它：

try {
  const response = await fetch(url, {
    signal: controller.signal
  });
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('请求被用户中断');
  } else {
    console.error('其他错误:', error);
  }
}

实际应用场景

1. 超时中断

const controller = new AbortController();
// 设置1秒超时
const timeoutId = setTimeout(() => controller.abort(), 1000);

try {
  const response = await fetch('/api/data', {
    signal: controller.signal
  });
  clearTimeout(timeoutId);
  // 处理响应
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('请求超时');
  }
}

2. 批量请求中断

AbortController 的强大之处在于可以同时中断多个请求：

const urls = [
  '/api/user',
  '/api/posts',
  '/api/comments'
];

const controller = new AbortController();

// 创建多个fetch请求
const requests = urls.map(url => 
  fetch(url, { signal: controller.signal })
);

// 统一中断所有请求
document.getElementById('cancel-button').addEventListener('click', () => {
  controller.abort();
});

try {
  const responses = await Promise.all(requests);
  // 处理所有响应
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('所有请求已被中断');
  }
}

3. 与其他异步任务结合

AbortController 不仅适用于 fetch，还可以用于其他异步操作：

function longRunningTask(signal) {
  return new Promise((resolve, reject) => {
    const timer = setInterval(() => {
      if (signal.aborted) {
        clearInterval(timer);
        reject(new DOMException('Aborted', 'AbortError'));
      }
      // 执行任务...
    }, 100);
  });
}

const controller = new AbortController();

// 同时运行fetch和自定义任务
Promise.all([
  fetch('/api/data', { signal: controller.signal }),
  longRunningTask(controller.signal)
]).catch(error => {
  if (error.name === 'AbortError') {
    console.log('任务被中断');
  }
});

// 中断所有任务
controller.abort();