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

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

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

雖然上述代碼能夠正常工作，但它的嵌套層次較深，對(duì)于初次閱讀的人來(lái)說(shuō)可能不夠直觀。

為了提高代碼的可讀性，我們可以對(duì)上述實(shí)現(xiàn)進(jìn)行一些改進(jì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;
};

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

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

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

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

  return promise;
};

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

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

• 語(yǔ)法： Promise.withResolvers()
• 參數(shù)：無(wú)
• 返回值：
  • promise : 一個(gè)Promise對(duì)象
  • resolve : 一個(gè)函數(shù)，用于解決該P(yáng)romise。關(guān)于其語(yǔ)義，請(qǐng)參閱構(gòu)造函數(shù)。
  • reject : 一個(gè)函數(shù)，用于拒絕該P(yáng)romise。關(guān)于其語(yǔ)義，請(qǐng)參閱構(gòu)造函數(shù)。

最后，我們可以自定義一個(gè)函數(shù)來(lái)模擬Promise.withResolvers的行為：

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

  return { promise, resolve, reject };
}

可以看到，這個(gè)API在實(shí)現(xiàn)上其實(shí)也很簡(jiǎn)單，只是把我們平常獲取promise中resolve和reject的步驟封裝到一個(gè)方法中，但為我們節(jié)省了很多時(shí)間。

• 異色邊緣龍局北辰卡組詳解
• 《怪化貓》系列第二章《火鼠》近日公開(kāi)諸多新情報(bào)
• steam特賣頁(yè)面出現(xiàn)神秘粉發(fā)女孩 引發(fā)網(wǎng)友熱烈討論
• 大雪節(jié)氣活動(dòng)：桃源深處有人家雪盛冬藏
• 游俠晚報(bào)：《絕地潛兵2》口碑上升 Fami通一周評(píng)分