使用 Promise.withResolvers() 来简化你将函数 Promise 化的实现~~

引言

在JavaScript编程中,Promise 是一种处理异步操作的常用机制。Promise 对象代表了一个尚未完成但预期将来会完成的操作的结果。在本文中,我们将探讨如何通过使用 ES2024 的 Promise.withResolvers API 来优化我们的 Promise 实现。

现有实现的问题

首先,让我们看一个简单的示例,展示在没有使用 Promise.withResolvers 时,如何实现一个函数,该函数在传入的另一个函数执行完毕后2秒才返回结果:

js 复制代码
const returnAfterTwoSeconds = (func, ...args) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try {
        resolve(func(...args));
      } catch (e) {
        reject(e);
      }
    }, 2000);
  });
};

虽然上述代码能够正常工作,但它的嵌套层次较深,对于初次阅读的人来说可能不够直观。

改进实现

为了提高代码的可读性,我们可以对上述实现进行一些改进:

js 复制代码
const returnAfterTwoSeconds = (func, ...args) => {
  let outerResolve = null;
  let outerReject = null;
  const promise = new Promise((resolve, reject) => {
    outerResolve = resolve;
    outerReject = reject;
  });

  setTimeout(() => {
    try {
      outerResolve(func(...args));
    } catch (e) {
      outerReject(e);
    }
  }, 2000);

  return promise;
};

在这个改进版本中,我们首先创建了一个 Promise 对象,并暂存了它的 resolvereject 方法。然后在 setTimeout 中调用这些方法,最后返回 Promise 对象。这样,即使 setTimeout 中的回调执行完毕,返回的 Promise 对象也会根据回调的结果变为 resolved 或 rejected。

使用 Promise.withResolvers

现在,让我们看看如何使用 Promise.withResolvers 来进一步简化我们的代码:

js 复制代码
const returnAfterTwoSeconds = (func, ...args) => {
  const { promise, resolve, reject } = Promise.withResolvers();

  setTimeout(() => {
    try {
      resolve(func(...args));
    } catch (e) {
      reject(e);
    }
  }, 2000);

  return promise;
};

可以看到,这个方法并没有为我们的代码带来性能或者说实现方式上的优化,但是它使用起来很简单,也很好理解~ 有助于提高代码的可读性和简洁~

Promise.withResolvers 详解

根据 MDN 文档Promise.withResolvers 的语法如下:

  • 语法:Promise.withResolvers()
  • 参数:无
  • 返回值:
    • promise: 一个 对象。
    • resolve: 一个函数,用于解决该 Promise。关于其语义,请参阅 构造函数。
    • reject: 一个函数,用于拒绝该 Promise。关于其语义,请参阅 构造函数。

自定义实现

最后,我们可以自定义一个函数来模拟 Promise.withResolvers 的行为:

js 复制代码
function myWithResolvers() {
  let resolve = null;
  let reject = null;
  const promise = new Promise((_resolve, _reject) => {
    resolve = _resolve;
    reject = _reject;
  });

  return { promise, resolve, reject };
}

可以看到,这个api在实现上其实也很简单,只是把我们平常获取promise中resolve和reject的步骤封装到一个方法中,但为我们节省了很多时间~

相关推荐
旧味清欢|18 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
猿榜3 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队3 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia4 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia4 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记4 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
前端Hardy4 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html