JavaScript 中 Promise 怎么在取消异步请求的场景中配合 AbortController 使用-js教程-PHP中文网

promise 本身不可取消，因其状态一旦开始便只能单向变为 fulfilled 或 rejected；所谓“取消”实为通过 abortcontroller 向 fetch 等原生支持 signal 的 api 发送中止信号，使其立即 reject aborterror，并由开发者主动忽略后续逻辑。

javascript 中 promise 怎么在取消异步请求的场景中配合 abortcontroller 使用

Promise 本身不支持取消，但结合 AbortController 可以实现“可中断”的异步请求逻辑——关键不是让 Promise 自身取消，而是让底层操作（如 fetch）响应中止信号，并让 Promise 尽快 reject 或忽略后续结果。

为什么 Promise 不能原生取消？

Promise 一旦创建并开始执行（例如进入 fetch 或 setTimeout），其状态只能从 pending → fulfilled 或 rejected，且不可逆、不可中途终止。所谓“取消”，实际是：提前通知正在运行的异步任务停止工作，并避免它再调用 resolve 或 reject。

AbortController 如何与 fetch 配合中断请求

fetch 是目前唯一原生支持 AbortSignal 的浏览器 API。调用 abort() 后，fetch 会立即 reject 一个 DOMException（name: "AbortError"），你可以捕获它来区分正常失败和主动取消：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

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

fetch('/api/data', { signal })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已被取消');
    } else {
      console.error('请求出错：', err);
    }
  });

// 3 秒后取消（模拟用户点击“取消”）
setTimeout(() => controller.abort(), 3000);

封装成可取消的 Promise 工厂函数

为复用逻辑，可写一个返回 { promise, abort } 的函数，把控制权暴露给调用方：

function cancellableFetch(url, options = {}) {
  const controller = new AbortController();
  const signal = controller.signal;

  const promise = fetch(url, { ...options, signal })
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    });

  return {
    promise: promise.catch(err => {
      if (err.name === 'AbortError') throw new Error('FETCH_CANCELLED');
      throw err;
    }),
    abort: () => controller.abort()
  };
}

// 使用示例
const { promise, abort } = cancellableFetch('/api/user/123');
promise.then(console.log).catch(console.error);

// 需要时调用
abort();