深入理解 ECMAScript 2024 新特性：Promise.withResolvers 詳情 - 前端,javascript,ecmascript 李遊Leo 動態日志

動態

詳情

深入理解 ECMAScript 2024 新特性：Promise.withResolvers - 動態詳情

09:37 上午 · 11月 04 ,2025

ECMAScript 2024 帶來了一些不錯的新特性，其中 Promise.withResolvers 是一個備受關注的新增方法。這一方法極大地簡化了開發者在手動創建 Promise 時管理 resolve 和 reject 的複雜性。

本文將詳細介紹 Promise.withResolvers 的設計背景、使用方式，並通過多個技術案例展示其在實際開發中的潛力。

背景與問題

在日常開發中，我們經常需要手動創建 Promise，並通過外部邏輯控制其 resolve 和 reject。傳統的方式是通過構造函數傳入回調：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 1000);
});

雖然這種寫法足夠靈活，但它也存在以下問題：

代碼冗餘：每次都要聲明 resolve 和 reject，容易造成重複代碼。
潛在錯誤：如果 resolve 或 reject 沒有被正確調用，可能導致邏輯異常。
不直觀：開發者在需要暴露 resolve 和 reject 時，需要將其保存在外部變量中。

為了解決這些問題，Promise.withResolvers 應運而生。

目前該新特性兼容性如下：

Promise.withResolvers 的定義

Promise.withResolvers 是 ECMAScript 2024 中新增的靜態方法，允許開發者同時創建一個 Promise 和與其綁定的 resolve 與 reject 方法。其核心優勢是減少了代碼複雜性，使 Promise 的管理更加簡潔。

語法

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

返回值

promise：一個新的 Promise 實例。
resolve：對應的 resolve 函數。
reject：對應的 reject 函數。

使用案例

案例 1：手動控制異步操作

在傳統方式下，手動控制異步操作的 Promise 通常需要外部變量存儲 resolve 和 reject：

let resolveRef;
let rejectRef;
const promise = new Promise((resolve, reject) => {
  resolveRef = resolve;
  rejectRef = reject;
});

// 後續邏輯
setTimeout(() => {
  resolveRef("Success!");
}, 1000);

使用 Promise.withResolvers 後：

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

// 後續邏輯
setTimeout(() => {
  resolve("Success!");
}, 1000);

promise.then(console.log); // 輸出: "Success!"

這種寫法不僅減少了變量聲明，也避免了邏輯分散的問題。

案例 2：並行異步任務的管理

假設我們需要同時處理多個異步任務，並希望在外部隨時控制它們的狀態：

const task1 = Promise.withResolvers();
const task2 = Promise.withResolvers();

// 模擬異步任務
setTimeout(() => task1.resolve("Task 1 Complete"), 1000);
setTimeout(() => task2.reject("Task 2 Failed"), 2000);

Promise.allSettled([task1.promise, task2.promise])
  .then(results => console.log(results));

/* 輸出：
[
  { status: "fulfilled", value: "Task 1 Complete" },
  { status: "rejected", reason: "Task 2 Failed" }
]
*/

Promise.withResolvers 讓我們可以更加靈活地管理每個任務的完成狀態。

案例 3：事件驅動的異步邏輯

事件監聽通常需要 Promise 與事件的觸發邏輯綁定。以下是傳統與新方式的對比：

傳統寫法

function waitForEvent(emitter, eventName) {
  return new Promise((resolve, reject) => {
    const listener = (data) => {
      resolve(data);
      emitter.off(eventName, listener); // 確保移除監聽器
    };
    emitter.on(eventName, listener);
  });
}

使用 `Promise.withResolvers`

function waitForEvent(emitter, eventName) {
  const { promise, resolve } = Promise.withResolvers();
  const listener = (data) => {
    resolve(data);
    emitter.off(eventName, listener);
  };
  emitter.on(eventName, listener);
  return promise;
}

兩種方式功能相同，但後者的 resolve 提取更加直觀，且代碼簡潔性更高。

案例 4：重試機制

在某些場景中，我們需要實現異步操作的重試機制。藉助 Promise.withResolvers，可以更加輕鬆地實現：

function retryOperation(operation, maxRetries) {
  const attempt = (retriesLeft, { promise, resolve, reject }) => {
    operation()
      .then(resolve)
      .catch((err) => {
        if (retriesLeft > 0) {
          console.warn(`Retrying... (${retriesLeft} retries left)`);
          attempt(retriesLeft - 1, Promise.withResolvers());
        } else {
          reject(err);
        }
      });
    return promise;
  };

  return attempt(maxRetries, Promise.withResolvers());
}

// 示例使用
retryOperation(() => fetch("https://api.example.com"), 3)
  .then(() => console.log("Operation succeeded"))
  .catch(() => console.error("Operation failed after retries"));

Promise.withResolvers 使得在遞歸邏輯中創建新 Promise 和管理其狀態變得更加簡單。

注意事項與最佳實踐

避免濫用：雖然 Promise.withResolvers 提供了強大的控制能力，但在大多數場景下，async/await 或傳統的 Promise 足以應對。
錯誤處理：確保正確捕獲和處理 reject，避免未處理的 Promise 異常。
代碼可讀性：儘量在適合的場景中使用，不要因為簡潔性犧牲代碼的直觀性。