Promise.withResolvers() vs 传统 Promise:谁更胜一筹?

前言

介绍个 ES 新特性。

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

js 复制代码
let resolve, reject;

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

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


正文

现在有语法糖可以同样做到这种返回promiseresolvereject这种写法了。

就是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`传递的值`成功!`。
})

执行顺序:

  1. 创建 Promisepromise 初始状态为 pending
  2. 设置定时器 :1 秒后执行 resolve('成功!')
  3. 监听 Promisethen 注册回调,等待 promise 完成。
  4. 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() 更简洁,无需手动管理外部变量。

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路6 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜7 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui