javascript 原生 promise 对象本身不支持取消操作，要实现异步操作的取消功能，必须引入外部机制。最标准的做法是使用 abortcontroller 和 abortsignal，通过向发起请求的 api（如 fetch）传递信号，并在需要时调用 abort() 方法来中断流程。对于自定义逻辑，则需要手动实现一个基于状态标志或 promise 链式调用的取消逻辑。
如何使用 AbortController 中断 Fetch 请求
在浏览器环境中处理网络请求时，可以通过创建 AbortController 实例来获取 signal，并将其作为配置项传递给 fetch 函数。当调用控制器的 abort() 方法时，相关的请求会立即终止并抛出 AbortError。开发者需要在 catch 块中捕获该错误以区分是网络故障还是主动取消。
const controller = new AbortController();
const signal = controller.signal;
// 启动异步请求
const fetchData = async () => {
try {
const response = await fetch('/api/data', { signal });
const data = await response.json();
console.log('Data received:', data);
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch failed:', error);
}
}
};
fetchData();
// 模拟在 2 秒后取消请求
setTimeout(() => {
controller.abort();
}, 2000);上述代码展示了完整的取消流程。首先实例化控制器，获取信号。在异步函数中，将信号注入 fetch 配置。若未超时，正常解析数据；若触发 abort，则进入 catch 分支并通过检查错误名称来确认是取消行为。这种模式适用于所有支持 Signal 的现代 Web API。
立即学习“Java免费学习笔记（深入）”；
如何为自定义 Promise 添加取消能力
对于不涉及网络请求的自定义异步任务，例如长时间的计算或轮询，可以通过包装 Promise 来实现取消。核心思路是维护一个内部状态标志，或者使用 Promise.race 竞争一个“取消信号” Promise。当取消条件满足时，拒绝主任务或跳过后续步骤。
function createCancelablePromise(executor) {
let rejectCancel;
const cancelPromise = new Promise((_, reject) => {
rejectCancel = reject;
});
const mainPromise = new Promise((resolve, reject) => {
executor(resolve, reject);
});
return {
promise: Promise.race([mainPromise, cancelPromise]),
cancel: () => {
rejectCancel(new Error('Cancelled'));
}
};
}
// 使用示例
const task = createCancelablePromise((resolve, reject) => {
setTimeout(() => {
resolve('Task completed');
}, 5000);
});
task.promise.then(console.log).catch(console.error);
// 取消任务
task.cancel();该封装函数接收一个执行器，同时创建一个可被拒绝的取消 Promise。通过 Promise.race 让主任务和取消任务竞争。一旦调用 cancel()，取消 Promise 被拒绝，Race 结果即为取消错误，主任务虽仍在后台运行但结果将被丢弃。这种方式解耦了业务逻辑与取消控制。
取消操作对正在进行的异步回调有何影响
当调用取消方法后，已经提交到事件循环中的微任务或宏任务并不会被强制停止。例如在上面的自定义 Promise 示例中，即使调用了 cancel()，setTimeout 依然会在 5 秒后触发。如果回调内部没有检查取消状态，它仍会尝试执行后续逻辑，但由于 Race 已经结束，其返回值会被忽略。因此，最佳实践是在长耗时任务的中间节点主动检查取消信号，以避免资源浪费。
