如何用AbortController取消JavaScript异步编程中的请求

在JavaScript异步编程过程中，我们经常会遇到需要中途取消异步操作的场景，比如用户快速切换页面时，之前发起的网络请求已经没有存在的必要，继续等待响应会浪费资源，甚至可能引发不必要的错误。AbortController就是专门用来解决这类问题的原生接口，它可以在异步操作执行过程中主动终止操作，让异步控制更加灵活。

AbortController基本用法

AbortController的核心是两个部分：控制器实例本身和关联的signal对象。控制器实例提供abort()方法用来触发取消操作，signal对象则会传递给需要被控制的异步操作，当abort被调用时，signal的aborted属性会变为true，同时会触发abort事件。

基本使用步骤如下：

• 创建AbortController实例
• 获取实例的signal属性
• 将signal传递给支持取消的异步操作
• 在需要取消的时候调用控制器的abort方法

下面是一个最简单的使用示例：

// 创建AbortController实例
const controller = new AbortController();
// 获取signal对象
const signal = controller.signal;

// 监听signal的abort事件
signal.addEventListener('abort', () => {
  console.log('异步操作已被取消');
});

// 3秒后触发取消操作
setTimeout(() => {
  controller.abort();
}, 3000);

在fetch请求中使用AbortController

fetch API原生支持AbortController，这是它最常见的使用场景。我们只需要在fetch的配置参数中传入signal，就可以在需要的时候取消对应的网络请求。

下面是一个完整的fetch请求取消示例：

// 创建控制器
const controller = new AbortController();
const { signal } = controller;

// 发起fetch请求，传入signal
fetch('https://ipipp.com/api/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(data => {
    console.log('请求成功，数据为：', data);
  })
  .catch(error => {
    // 判断是否是取消导致的错误
    if (error.name === 'AbortError') {
      console.log('请求已被主动取消');
    } else {
      console.log('请求发生其他错误：', error);
    }
  });

// 2秒后取消请求
setTimeout(() => {
  controller.abort();
}, 2000);

当调用controller.abort()之后，fetch请求会被终止，promise会进入reject状态，抛出的错误name属性为AbortError，我们可以在catch中针对性处理这类取消错误。

多个请求共享同一个AbortController

如果我们有多个异步请求需要同时取消，不需要为每个请求创建单独的AbortController，只需要让这些请求共享同一个signal即可。调用一次abort方法，所有关联的请求都会被取消。

const controller = new AbortController();
const { signal } = controller;

// 第一个请求
fetch('https://ipipp.com/api/list', { signal })
  .then(res => res.json())
  .then(data => console.log('列表数据：', data))
  .catch(err => {
    if (err.name === 'AbortError') console.log('列表请求已取消');
  });

// 第二个请求
fetch('https://ipipp.com/api/detail', { signal })
  .then(res => res.json())
  .then(data => console.log('详情数据：', data))
  .catch(err => {
    if (err.name === 'AbortError') console.log('详情请求已取消');
  });

// 统一取消两个请求
setTimeout(() => {
  controller.abort();
}, 1500);

注意事项

abort只能调用一次

AbortController的abort()方法只能调用一次，多次调用不会产生额外效果，也不会报错。调用之后signal的aborted属性会永久变为true，后续再关联这个signal的异步操作会直接被取消。

已完成的请求无法取消

如果异步操作已经执行完成（比如fetch已经拿到了响应），再调用abort方法是没有效果的，不会触发取消逻辑。

兼容性说明

AbortController是现代浏览器原生支持的接口，IE浏览器不支持，如果需要兼容IE，需要引入对应的polyfill库。大部分现代前端项目不需要考虑IE兼容性的话，可以直接使用。

总结

AbortController为JavaScript异步编程提供了便捷的取消能力，尤其是在网络请求场景中，能够有效避免不必要的资源消耗。它的使用逻辑简单，只要掌握控制器创建、signal传递、abort调用这几个核心步骤，就能快速应用到项目中。在实际使用时，注意区分取消错误和其他错误的处理，就能让异步逻辑更加健壮。

AbortControllerJavaScript异步编程fetch请求取消signal属性abort方法修改时间：2026-07-11 02:27:22