技术资讯:一个Promise全新API,真好用!

大家好,我是大澈!

本文约800+字,整篇阅读大约需要1分钟。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 资讯速览

最近,Promise 新出了一个方法,已经进入 Stage 3 (候选阶段) ,相信很快就能达到 Stage 4 (完成阶段),并在项目中广泛使用。

这个方法就是 Promise.withResolvers。它是一个静态方法,返回一个包含新的 Promise 对象和两个函数的对象。

其中,两个函数即:resolve 和 reject。分别对应于传递给 Promise 构造函数执行器的两个参数。

Promise.withResolvers 的关键点,在于现在解决和拒绝函数与 Promise 对象本身处于同一作用域,而不是在执行器中创建并且只能使用一次。

这使得在某些更高级的用例中可能会更加方便,例如:在重复事件中重用解决和拒绝函数,特别是在处理流和队列时。这也意味着嵌套层级较少,而不是在执行器中包含大量逻辑。

2. 资讯详细

先举例对比说明该方法的妙用,再补充一下注意点,最后做小结。

2.1 举例说明

在没有 Promise.withResolvers 之前,你可能实现了这样的代码:

js 复制代码
<script>
  let num = true;
  let resolve, reject;

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

  num ? resolve("ok") : reject("not ok");
</script>

在使用 Promise.withResolvers 之后:

js 复制代码
<script>
  let num = true;

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

  num ? resolve("ok") : reject("not ok");
</script>

很明显的发现,当我们单独使用 resolve 和 reject 时,用上 Promise.withResolvers ,不需要再定义一个额外的变量去存储。

2.2 注意点

该特性目前还在 Stage 3 阶段,预计2024年正式发版。

目前主流浏览器还没有全部支持该特性,谷歌需要 117以上的版本才能使用这个方法。

2.3 小结

Promise 新出了一个方法,已经进入 Stage 3 (候选阶段)。

它的关键点,在于现在解决和拒绝函数与 Promise 对象本身处于同一作用域,而不是在执行器中创建并且只能使用一次。

结语

建立这个平台的初衷:

  • 打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。
  • 遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。
  • 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

相关推荐
css趣多多28 分钟前
this.$watch
前端·javascript·vue.js
Code小翊33 分钟前
JS语法速查手册,一遍过JS
javascript
子春一1 小时前
Flutter for OpenHarmony:构建一个 Flutter 天气卡片组件,深入解析动态 UI、响应式布局与语义化设计
javascript·flutter·ui
有来技术1 小时前
ASP.NET Core 权限管理系统(RBAC)设计与实现|vue3-element-admin .NET 后端
vue.js·后端·c#·asp.net·.net
qq_12498707531 小时前
基于springboot的林业资源管理系统设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
Remember_9931 小时前
Java 单例模式深度解析:设计原理、实现范式与企业级应用场景
java·开发语言·javascript·单例模式·ecmascript
写代码的【黑咖啡】1 小时前
Python 中的自然语言处理利器:NLTK
前端·javascript·easyui
qq_12498707532 小时前
基于springboot的竞赛团队组建与管理系统的设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·信息可视化·毕业设计·计算机毕业设计
可问春风_ren2 小时前
Vue3 入门详解:从基础到实战
开发语言·前端·javascript·vue.js·前端框架·ecmascript·edge浏览器
摘星编程2 小时前
用React Native开发OpenHarmony应用:NativeStack原生导航
javascript·react native·react.js