Promise.withResolvers() vs 传统 Promise：谁更胜一筹？

前言

介绍个 ES 新特性。

之前我们要返回promise的resolve和reject出去，就会用这种定义变量的方法，以前就是这些写，在Promise外面定义两个变量，然后在这个构造器里面，给它赋值：

js 复制代码

let resolve, reject;

const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

然后在别的函数的地方去调用这个函数，以及promise的resolve和reject。

正文

现在有语法糖可以同样做到这种返回promise、resolve、reject这种写法了。

就是Promise.withResolvers()这个。

Promise.withResolvers()静态方法返回一个对象，其包含一个新的Promise对象和两个函数。

语法

js 复制代码

Promise.withResolvers()

返回值

这个静态方法呢，它就会返回一个对象，这个对象里边有三个属性啊。你可以把它解构出来一个，就是我们的promise，它就是用来得到一个promise的。然后呢，是跟这个promise相关的resolve和reject。

1、promise: 一个Promise对象。

2、resolve

3、reject

上面那个返回resolve和reject的写法，可以换成这种：

js 复制代码

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

底层核心代码

js 复制代码

Promise.withResolvers = function () {
  let resolve, reject
  const promise = new Promise((_resolve, _reject) => {
    [resolve, reject] = [_resolve, _reject]
  })
  
  return { promise, resolve, reject }
}

例子

js 复制代码

const { promise, resolve, reject } = Promise.withResolvers() // 这里相当于手动创建了`Promise`，并且提取出`resolve`和`reject`。

// 1秒后，调用`resolve('成功！')`，`promise`状态从`pending`变为`fulfilled`，并携带值`成功！`
setTimeout(() => {
  resolve('成功！')
}, 1000)

promise.then(value => {
  console.log(value) // `promise.then`监听`Promise`完成。`then`注册的回调会在`promise`被`resolve`后执行，并接收`resolve`传递的值`成功！`。
})

执行顺序：

创建 Promise ：promise 初始状态为 pending。
设置定时器 ：1 秒后执行 resolve('成功！')。
监听 Promise ：then 注册回调，等待 promise 完成。
1 秒后 ：
- resolve('成功！') 被调用，promise 变为 fulfilled。
- then 的回调执行，打印 "成功！"。

输出：

复制代码

成功！  （1秒后打印）

对比传统写法：

javascript 复制代码

let resolve; // 传统方式需要外部变量
const promise = new Promise((res) => {
  resolve = res;
});

setTimeout(() => {
  resolve('成功！');
}, 1000);

promise.then(console.log); // "成功！"

总结

Promise.withResolvers() 更简洁，无需手动管理外部变量。