JavaScript Promise.withResolvers简化Promise创建模式

Promise.withResolvers 是 ECMAScript 2024 引入的一个静态方法，旨在解决传统 new Promise 构造函数在特定场景下的局限性。它允许将 promise 对象及其控制函数 resolve 和 reject 暴露在同一个作用域中，无需通过回调函数包裹，从而简化了异步逻辑的编写。

理解传统模式的痛点

在 Promise.withResolvers 出现之前，如果需要在 Promise 创建后、在异步操作完成前控制其状态（例如等待点击事件、定时器或外部回调），必须使用“外部变量”技巧。

1. 声明 一个外部变量用于暂存 resolve 函数。
2. 使用 new Promise 创建实例。
3. 在执行器回调中，将 resolve 赋值 给外部变量。
4. 在后续的逻辑中，调用 该外部变量来改变 Promise 状态。

以下代码展示了这种繁琐的模式：

function waitForClick() {
  let resolveClick;

  const promise = new Promise((resolve) => {
    // 必须手动将 resolve 提取到外部作用域
    resolveClick = resolve;
  });

  // 模拟事件监听
  document.addEventListener('click', resolveClick, { once: true });

  return promise;
}

这种写法存在两个明显问题：需要声明额外的变量（如 resolveClick），且 Promise 的创建与逻辑控制耦合在一起，代码阅读不够直观。

使用 Promise.withResolvers 重构

Promise.withResolvers 将 promise 对象与其控制函数 resolve 和 reject 作为一个对象的三个属性同时返回。这使得我们可以在不使用包装器函数的情况下访问它们。

1. 调用 Promise.withResolvers() 静态方法。
2. 解构 获取 promise, resolve, reject 三个变量。
3. 设置 异步逻辑（如事件监听）。
4. 在适当的时机 调用 resolve 或 reject。
5. 返回 promise 对象供外部使用。

将上述“等待点击”的功能使用新语法重写：

function waitForClick() {
  // 一步获取 promise 和控制函数
  const { promise, resolve, reject } = Promise.withResolvers();

  // 直接在当前作用域使用 resolve
  document.addEventListener('click', resolve, { once: true });

  // 返回 promise
  return promise;
}

核心差异对比

为了更清晰地展示两者的区别，我们可以从代码结构和作用域角度进行对比。

实战场景：带超时的异步任务

在实际开发中，常需要给一个异步操作（如 fetch）添加超时限制。这需要同时处理成功回调、失败回调以及超时定时器，使用 Promise.withResolvers 可以极其优雅地解决。

1. 定义 一个 fetchWithTimeout 函数，接收 URL 和超时时间参数。
2. 调用 Promise.withResolvers() 获取控制权。
3. 启动 fetch 请求。
4. 设置 setTimeout，超时后 调用 reject 并抛出错误。
5. 根据请求结果 调用 resolve 或 reject。

function fetchWithTimeout(url, timeout = 5000) {
  // 获取控制权
  const { promise, resolve, reject } = Promise.withResolvers();
  let timeoutId;

  // 启动 fetch
  fetch(url)
    .then(response => {
      // 清除定时器并解析结果
      clearTimeout(timeoutId);
      resolve(response);
    })
    .catch(error => {
      // 清除定时器并拒绝
      clearTimeout(timeoutId);
      reject(error);
    });

  // 设置超时逻辑
  timeoutId = setTimeout(() => {
    reject(new Error(`Request timed out after ${timeout}ms`));
  }, timeout);

  return promise;
}

// 使用示例
fetchWithTimeout('https://api.example.com/data', 2000)
  .then(res => console.log('Success:', res.status))
  .catch(err => console.error('Error:', err.message));

在这个场景中，resolve 和 reject 需要在 fetch.then、fetch.catch 和 setTimeout 三个不同的回调中使用。使用传统的 new Promise 写法，必须将这些逻辑全部嵌套在构造函数内部，或者在外部声明大量变量，而 Promise.withResolvers 让代码逻辑更加扁平化。

兼容性说明与 Polyfill

Promise.withResolvers 是相对较新的特性。在生产环境使用前，请检查目标运行环境的支持情况。

1. 打开 浏览器控制台或 Node.js 环境。
2. 输入 typeof Promise.withResolvers 查看返回值。
3. 如果返回 "function"，则表示当前环境支持该特性。

如果不支持，可以使用简单的 Polyfill 实现：

if (!Promise.withResolvers) {
  Promise.withResolvers = function () {
    let resolve, reject;
    const promise = new Promise((res, rej) => {
      resolve = res;
      reject = rej;
    });
    return { promise, resolve, reject };
  };
}

这段 Polyfill 实际上就是我们最开始提到的“传统模式”的封装，它确保了在不支持原生 API 的环境中也能使用相同的语法糖。