首页 > 教程 > JavaScript编程中的Promise.withResolvers实践

JavaScript编程中的Promise.withResolvers实践

时间:2024-06-13 | 来源: | 阅读:134

话题: T VA AVA SC v Ri S C JavaScript LV IP 编程 AV java

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

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

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

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

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

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

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对象,并暂存了它的resolve和reject方法。然后在setTimeout中调用这些方法,最后返回Promise对象。这样,即使setTimeout中的回调执行完毕,返回的Promise对象也会根据回调的结果变为resolved或rejected。

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

const returnAfterTwoSeconds = (func, ...args) => {
  const { promise, resolve, reject } = Promise.withResolvers();

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

  return promise;
};

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

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

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

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

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的步骤封装到一个方法中,但为我们节省了很多时间。

SC
SC
正式运营 安全无广告
赞(0)  02.26 需网络
RPG Ri序章0.2.1
RPG Ri序章0.2.1
正式运营 安全无广告
赞(0)  03.30 需网络
推荐

最新好玩手游

更多

手游风云榜

更多

资讯阅读

更多


湘ICP备2022002427号-10 湘公网安备:43070202000427号
© 2013~2024 haote.com 好特网