JavaScript中的异步操作广泛存在于接口请求、定时器、文件读取等场景中，有时候我们需要在操作完成前主动终止它，避免不必要的资源消耗或者逻辑错误。AbortController就是专门用来处理这类取消需求的原生接口，它提供了标准化的取消信号传递机制，让异步操作的取消逻辑更加清晰可控。
AbortController基本用法
AbortController的核心是两个属性：signal和abort方法。signal是一个AbortSignal对象，会被传递给需要支持取消的异步操作，当调用abort方法时，signal会触发中止事件，对应的异步操作就可以捕获到这个信号并终止执行。
基础使用示例：
// 创建AbortController实例
const controller = new AbortController();
// 获取signal对象
const { signal } = controller;
// 模拟一个可取消的异步操作
function asyncTask(signal) {
return new Promise((resolve, reject) => {
// 监听signal的中止事件
signal.addEventListener('abort', () => {
reject(new Error('异步操作已被取消'));
});
// 模拟3秒后完成操作
setTimeout(() => {
resolve('操作完成');
}, 3000);
});
}
// 启动异步任务
asyncTask(signal)
.then(res => console.log(res))
.catch(err => console.log(err.message));
// 1秒后主动取消操作
setTimeout(() => {
controller.abort();
}, 1000);
结合Fetch请求取消网络请求
Fetch API原生支持AbortController，这是最常见的使用场景。当请求发出后，如果用户在请求完成前切换了页面或者触发了取消操作，就可以通过AbortController终止这个请求，避免无效的网络请求占用资源。
结合Fetch的使用示例：
const controller = new AbortController();
const { signal } = controller;
// 发起fetch请求，传入signal
fetch('https://ipipp.com/api/test', { signal })
.then(response => {
if (!response.ok) throw new Error('请求失败');
return response.json();
})
.then(data => console.log('请求结果:', data))
.catch(err => {
// 判断是否为取消导致的错误
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.log('请求出错:', err.message);
}
});
// 2秒后取消请求
setTimeout(() => {
controller.abort();
}, 2000);
取消自定义Promise异步任务
除了内置支持AbortController的API，我们也可以让自己的自定义Promise异步任务支持取消功能，核心逻辑就是在Promise内部监听signal的abort事件，触发时调用reject终止Promise。
自定义支持取消的异步函数示例：
function createCancelableTask(signal, duration) {
return new Promise((resolve, reject) => {
// 如果signal已经中止，直接拒绝
if (signal.aborted) {
reject(new Error('任务已被取消'));
return;
}
// 监听中止事件
const onAbort = () => {
clearTimeout(timer);
reject(new Error('任务执行中被取消'));
};
signal.addEventListener('abort', onAbort);
// 模拟异步任务
const timer = setTimeout(() => {
signal.removeEventListener('abort', onAbort);
resolve(`任务执行完成，耗时${duration}ms`);
}, duration);
});
}
const controller = new AbortController();
createCancelableTask(controller.signal, 5000)
.then(res => console.log(res))
.catch(err => console.log(err.message));
// 3秒后取消任务
setTimeout(() => {
controller.abort();
}, 3000);
使用注意事项
- AbortController的
abort方法只能调用一次，多次调用不会产生额外效果，也不会报错。 - signal的
aborted属性可以直接判断是否已经触发了中止，在启动异步任务前可以先检查这个属性，避免无效的异步操作启动。 - 取消操作触发后，对应的异步操作的错误对象的
name属性通常是AbortError，可以通过这个属性判断错误是否由取消操作导致，避免和其他错误混淆。 - 如果异步任务已经完成，再调用
abort方法是没有效果的，不会触发任何事件也不会影响已经完成的结果。
兼容性说明
AbortController在现代浏览器和Node.js 15.0.0及以上版本都原生支持，如果需要兼容更老的环境，可以通过polyfill实现对应的功能。使用时不需要额外引入第三方库，直接使用原生API就可以满足大部分取消异步操作的需求。
AbortControllerJavaScript异步操作取消请求修改时间：2026-06-26 22:24:45