JS `Promise.withResolvers` (提案)：简化 Promise 创建

各位观众，欢迎来到今天的“Promise 解密”讲座！今天我们要聊一个 Promise 的新玩具——Promise.withResolvers，这玩意儿能让你的 Promise 创建过程变得像玩乐高一样简单。准备好了吗？让我们开始吧！

Promise 的老朋友：new Promise()

在深入 Promise.withResolvers 之前，我们先回顾一下老朋友 new Promise()。它就像 Promise 世界的基石，我们一直用它来创建新的 Promise 实例。

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const result = '操作成功！';
    resolve(result); // 成功时调用 resolve
  }, 1000);

  // 如果发生错误，调用 reject
  // reject('操作失败！');
});

myPromise
  .then((value) => {
    console.log('Promise resolved:', value);
  })
  .catch((error) => {
    console.error('Promise rejected:', error);
  });

这段代码大家肯定都见过，甚至背得滚瓜烂熟了。new Promise() 接受一个执行器函数，这个函数接收 resolve 和 reject 两个参数，它们都是函数。我们在异步操作成功时调用 resolve，失败时调用 reject。

但是，这种方式存在一个小小的“代码冗余”问题。我们需要在 Promise 的构造函数内部定义 resolve 和 reject，然后在异步操作的回调函数中调用它们。如果异步操作比较复杂，或者涉及到多个回调函数，代码就会变得有点凌乱。

Promise.withResolvers：闪亮登场！

Promise.withResolvers 就是为了解决这个问题而生的。它提供了一种更简洁、更优雅的方式来创建 Promise。它返回一个对象，包含 Promise 实例以及对应的 resolve 和 reject 函数。

const { promise, resolve, reject } = Promise.withResolvers();

// 异步操作
setTimeout(() => {
  const result = '操作成功！';
  resolve(result); // 成功时调用 resolve
}, 1000);

promise
  .then((value) => {
    console.log('Promise resolved:', value);
  })
  .catch((error) => {
    console.error('Promise rejected:', error);
  });

看到了吗？我们不再需要在 new Promise() 的执行器函数中定义 resolve 和 reject 了。Promise.withResolvers() 直接把它们“吐”出来，我们可以直接在外部使用。

Promise.withResolvers 的结构

Promise.withResolvers() 返回的对象结构非常简单：

属性	类型	描述
`promise`	`Promise`	创建的 Promise 实例。
`resolve`	`function`	用于解决（resolve） Promise 的函数。
`reject`	`function`	用于拒绝（reject） Promise 的函数。

Promise.withResolvers 的优势

代码更清晰： 将 Promise 的创建和解决/拒绝逻辑分离，代码结构更清晰。
更易于测试： 可以直接访问 resolve 和 reject 函数，方便编写单元测试。
避免作用域问题： 在复杂的异步场景中，可以避免 resolve 和 reject 函数的作用域问题。

用例：网络请求

让我们来看一个实际的例子：使用 Promise.withResolvers 来封装一个网络请求。

function fetchData(url) {
  const { promise, resolve, reject } = Promise.withResolvers();

  fetch(url)
    .then((response) => {
      if (!response.ok) {
        reject(new Error(`HTTP error! Status: ${response.status}`));
      }
      return response.json();
    })
    .then((data) => {
      resolve(data);
    })
    .catch((error) => {
      reject(error);
    });

  return promise;
}

fetchData('https://jsonplaceholder.typicode.com/todos/1')
  .then((data) => {
    console.log('Data:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

在这个例子中，fetchData 函数使用 Promise.withResolvers 创建一个 Promise。网络请求的成功和失败分别调用 resolve 和 reject。

用例：定时器

再来看一个使用定时器的例子：

function delay(ms) {
  const { promise, resolve } = Promise.withResolvers();

  setTimeout(() => {
    resolve();
  }, ms);

  return promise;
}

delay(2000)
  .then(() => {
    console.log('2 秒过去了！');
  });

这里，delay 函数创建一个 Promise，并在定时器到期后调用 resolve。

Promise.withResolvers 的兼容性

目前，Promise.withResolvers 还是一个提案，尚未被所有浏览器和 Node.js 版本完全支持。在使用时，需要注意兼容性问题。

浏览器： 较新版本的 Chrome, Firefox, Safari 等已经支持. 你可以访问 https://caniuse.com/mdn-javascript_builtins_promise_withresolvers 来查看最新的兼容性信息.
Node.js: Node.js v18+ 版本开始支持.

如果需要在旧版本的浏览器或 Node.js 中使用 Promise.withResolvers，可以使用 polyfill。

Polyfill 示例

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

这段代码检查 Promise.withResolvers 是否存在，如果不存在，则创建一个 polyfill。

总结

Promise.withResolvers 提供了一种更简洁、更优雅的方式来创建 Promise。它可以提高代码的可读性和可维护性，尤其是在处理复杂的异步操作时。虽然目前兼容性还不够完美，但随着时间的推移，它将会成为 Promise API 中不可或缺的一部分。

new Promise() vs Promise.withResolvers：对比

为了更好地理解 Promise.withResolvers 的优势，我们来对比一下 new Promise() 和 Promise.withResolvers：

特性	`new Promise()`	`Promise.withResolvers`
创建方式	使用 `new` 关键字和执行器函数。	调用 `Promise.withResolvers()` 函数。
`resolve/reject`	在执行器函数内部定义。	作为对象属性返回，可以在外部直接使用。
代码结构	`resolve` 和 `reject` 在 Promise 内部，可能造成代码冗余。	`resolve` 和 `reject` 在 Promise 外部，代码结构更清晰。
适用场景	简单的异步操作。	复杂的异步操作，需要更灵活地控制 `resolve` 和 `reject`。

更高级的用法：取消 Promise

Promise.withResolvers 还可以用于实现 Promise 的取消功能。虽然 Promise 本身没有提供取消机制，但我们可以利用 Promise.withResolvers 来模拟实现。

function cancellablePromise(executor) {
  const { promise, resolve, reject } = Promise.withResolvers();
  let cancelled = false;

  const cancel = () => {
    cancelled = true;
    reject(new Error('Promise cancelled'));
  };

  executor(resolve, reject, cancel);

  return { promise, cancel };
}

const { promise, cancel } = cancellablePromise((resolve, reject, cancel) => {
  setTimeout(() => {
    if (!cancelled) {
      resolve('操作完成！');
    }
  }, 2000);
});

promise
  .then((value) => {
    console.log('Promise resolved:', value);
  })
  .catch((error) => {
    console.error('Promise rejected:', error);
  });

// 取消 Promise
setTimeout(() => {
  cancel();
}, 1000);

在这个例子中，cancellablePromise 函数创建一个可取消的 Promise。它接受一个执行器函数，该函数接收 resolve、reject 和 cancel 三个参数。cancel 函数用于取消 Promise。

结论

Promise.withResolvers 是一个非常有用的 Promise API，它可以简化 Promise 的创建过程，提高代码的可读性和可维护性。虽然目前兼容性还不够完美，但相信在不久的将来，它将会被广泛应用。希望今天的讲座对大家有所帮助！感谢大家的收看！下次再见！

发表回复 取消回复

发表回复取消回复