JavaScript編程中的Promise.withResolvers實踐

在JavaScript編程中，Promise是一種處理異步操作的常用機制。該對象代表了一個尚未完成但預(yù)期將來會完成的操作的結(jié)果。本文將探討如何通過使用 ES2024 的Promise.withResolvers API來優(yōu)化Promise實現(xiàn)。

首先，讓我們看一個簡單的示例。以下代碼展示了在沒有使用Promise.withResolvers時，如何實現(xiàn)一個函數(shù)，在傳入的另一個函數(shù)執(zhí)行完畢后2秒才返回結(jié)果：

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

雖然上述代碼能夠正常工作，但它的嵌套層次較深，對于初次閱讀的人來說可能不夠直觀。

為了提高代碼的可讀性，我們可以對上述實現(xiàn)進行一些改進：

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;
};

在這個改進版本中，我們首先創(chuàng)建了一個Promise對象，并暫存了它的resolve和reject方法。然后在setTimeout中調(diào)用這些方法，最后返回Promise對象。這樣，即使setTimeout中的回調(diào)執(zhí)行完畢，返回的Promise對象也會根據(jù)回調(diào)的結(jié)果變?yōu)閞esolved或rejected。

現(xiàn)在，讓我們看看如何使用Promise.withResolvers來進一步簡化我們的代碼：

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

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

  return promise;
};

可以看到，這個方法并沒有為我們的代碼帶來性能或者說實現(xiàn)方式上的優(yōu)化，但是它使用起來很簡單，也很好理解，有助于提高代碼的可讀性和簡潔。

根據(jù)MDN文檔，Promise.withResolvers的語法如下：

• 語法： Promise.withResolvers()
• 參數(shù)：無
• 返回值：
  • promise : 一個Promise對象
  • resolve : 一個函數(shù)，用于解決該Promise。關(guān)于其語義，請參閱構(gòu)造函數(shù)。
  • reject : 一個函數(shù)，用于拒絕該Promise。關(guān)于其語義，請參閱構(gòu)造函數(shù)。

最后，我們可以自定義一個函數(shù)來模擬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在實現(xiàn)上其實也很簡單，只是把我們平常獲取promise中resolve和reject的步驟封裝到一個方法中，但為我們節(jié)省了很多時間。

• 《暗喻幻想：ReFantazio》尤法社群等級提升作用介紹
• 【長城守望】新服開啟！沖榜就送非遺城磚
• 《寶可夢大集結(jié)》路卡利歐技能圖鑒
• 《塞爾達傳說 智慧的再現(xiàn)》螺旋甜味冰沙怎么制作
• 《仙劍世界》黑蜘蛛森林寶箱開啟方法