JavaScript内核与高级编程之：`JavaScript`的`Promise.withResolvers()`：如何更方便地创建 `JavaScript` 可控的 `Promise`。

各位观众老爷们，晚上好！欢迎来到“JavaScript奇技淫巧”小课堂。今天咱们要聊点新鲜玩意儿，叫做Promise.withResolvers()。保证让您听完之后，以后再也不用手动封装Promise了，直接起飞！

开场白：那些年，我们手动封装的Promise

想必各位都经历过这样的场景：你需要创建一个Promise，但是需要在外部控制它的resolve和reject。以前是怎么做的？通常是这样：

function createControlledPromise() {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });

  return {
    promise,
    resolve,
    reject,
  };
}

const { promise, resolve, reject } = createControlledPromise();

promise.then((value) => {
  console.log("Promise resolved with:", value);
});

promise.catch((error) => {
  console.error("Promise rejected with:", error);
});

setTimeout(() => {
  resolve("Hello, world!");
}, 1000);

这段代码虽然能用，但是看起来是不是有点冗余？我们手动定义了resolve和reject变量，然后在Promise构造函数里赋值，最后再把它们返回。写多了，手都麻了。

Promise.withResolvers()：优雅登场

现在，ES2024带来了Promise.withResolvers()，它能让你更优雅地创建可控的Promise。 就像一个魔法棒，轻轻一挥，Promise就诞生了，resolve和reject也乖乖地站在你面前。

Promise.withResolvers()是一个静态方法，它返回一个对象，该对象包含三个属性：

• promise: 创建的Promise实例。
• resolve: 用于解决Promise的函数。
• reject: 用于拒绝Promise的函数。

用代码说话：

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

promise.then((value) => {
  console.log("Promise resolved with:", value);
});

promise.catch((error) => {
  console.error("Promise rejected with:", error);
});

setTimeout(() => {
  resolve("Hello, Promise.withResolvers!");
}, 1000);

看到了吗？代码瞬间简洁了不少！ 不需要手动声明变量、不需要在Promise构造函数里赋值，直接使用Promise.withResolvers()就搞定了。

深入剖析：Promise.withResolvers()的优势

• 代码简洁性： 减少了样板代码，使代码更易于阅读和维护。
• 避免变量污染： resolve和reject变量只存在于返回的对象中，避免了在函数作用域内声明多余的变量。
• 更清晰的意图： 使用Promise.withResolvers()能够更清晰地表达你想要创建一个可控Promise的意图。

应用场景：Promise.withResolvers()的用武之地

Promise.withResolvers()在很多场景下都能派上用场，比如：

1. 异步操作的封装： 封装一些底层API，这些API可能不直接返回Promise，但你需要将它们包装成Promise的形式。

   function loadImage(url) {
     const { promise, resolve, reject } = Promise.withResolvers();
     const img = new Image();
   
     img.onload = () => {
       resolve(img);
     };
   
     img.onerror = () => {
       reject(new Error(`Failed to load image at ${url}`));
     };
   
     img.src = url;
     return promise;
   }
   
   loadImage("https://www.example.com/image.jpg")
     .then((img) => {
       console.log("Image loaded successfully:", img);
     })
     .catch((error) => {
       console.error("Error loading image:", error);
     });
   

2. 测试： 在单元测试中，你可能需要控制Promise的解决或拒绝，以便测试不同的场景。

   describe("MyComponent", () => {
     it("should resolve when data is fetched successfully", async () => {
       const { promise, resolve } = Promise.withResolvers();
       const fetchData = () => promise;
   
       // 模拟数据获取成功
       setTimeout(() => {
         resolve({ data: "some data" });
       }, 500);
   
       const result = await fetchData();
       expect(result).toEqual({ data: "some data" });
     });
   
     it("should reject when data fetching fails", async () => {
       const { promise, reject } = Promise.withResolvers();
       const fetchData = () => promise;
   
       // 模拟数据获取失败
       setTimeout(() => {
         reject(new Error("Failed to fetch data"));
       }, 500);
   
       try {
         await fetchData();
       } catch (error) {
         expect(error.message).toEqual("Failed to fetch data");
       }
     });
   });

3. 事件驱动编程： 将Promise与事件结合，当特定事件发生时，解决Promise。

   function waitForEvent(element, eventName) {
     const { promise, resolve } = Promise.withResolvers();
   
     element.addEventListener(eventName, () => {
       resolve();
     }, { once: true }); // 确保事件只触发一次
   
     return promise;
   }
   
   const button = document.getElementById("myButton");
   waitForEvent(button, "click")
     .then(() => {
       console.log("Button was clicked!");
     });

4. 状态管理库的实现： 在状态管理库中，你可能需要手动控制Promise的状态，以便实现复杂的异步状态更新逻辑。

   （由于状态管理库的实现较为复杂，这里只给出一个概念性的例子，具体实现会依赖于你选择的状态管理模式）

   class MyStore {
     constructor() {
       this.pendingRequests = {};
     }
   
     fetchData(id) {
       if (this.pendingRequests[id]) {
         return this.pendingRequests[id].promise;
       }
   
       const { promise, resolve, reject } = Promise.withResolvers();
       this.pendingRequests[id] = { promise, resolve, reject };
   
       // 模拟异步数据获取
       setTimeout(() => {
         const data = { id, value: `Data for ID ${id}` };
         this.pendingRequests[id].resolve(data);
         delete this.pendingRequests[id]; // 清理
       }, 1000);
   
       return promise;
     }
   }
   
   const store = new MyStore();
   store.fetchData(1)
     .then(data => console.log("Data 1:", data));
   
   store.fetchData(2)
     .then(data => console.log("Data 2:", data));
   
   // 如果在第一个请求完成之前再次请求相同的数据，将返回相同的Promise
   store.fetchData(1)
     .then(data => console.log("Data 1 again:", data)); // 将会立即返回，因为已经有缓存的Promise
   

注意事项：Promise.withResolvers()的正确使用姿势

• 避免死锁： 如果你忘记调用resolve或reject，Promise将永远处于pending状态，导致死锁。
• 只解决/拒绝一次： Promise只能被解决或拒绝一次，多次调用resolve或reject只会生效第一次。
• 异常处理： 在resolve或reject回调函数中，确保处理可能发生的异常，避免程序崩溃。

兼容性：Promise.withResolvers()的浏览器支持情况

Promise.withResolvers()是ES2024的新特性，截至目前（2024年10月），主流浏览器对它的支持情况如下：

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Node.js	支持

如果你的目标环境不支持Promise.withResolvers()，你可以使用polyfill来提供兼容性。

代码示例：更复杂的应用场景

假设我们需要实现一个函数，该函数在指定的时间间隔内重复执行某个操作，直到操作成功或达到最大重试次数。

async function retryOperation(operation, maxRetries, interval) {
  let attempt = 0;

  while (attempt < maxRetries) {
    try {
      return await operation(); // 尝试执行操作
    } catch (error) {
      console.error(`Attempt ${attempt + 1} failed: ${error.message}`);
      attempt++;

      if (attempt === maxRetries) {
        throw new Error(`Operation failed after ${maxRetries} retries.`);
      }

      await new Promise(resolve => setTimeout(resolve, interval)); // 等待一段时间
    }
  }
}

// 使用示例
async function myOperation() {
  const { promise, resolve, reject } = Promise.withResolvers();

  // 模拟异步操作，有时成功，有时失败
  setTimeout(() => {
    const success = Math.random() > 0.5; // 50%的概率成功

    if (success) {
      resolve("Operation succeeded!");
    } else {
      reject(new Error("Operation failed."));
    }
  }, 500);

  return promise;
}

retryOperation(myOperation, 3, 1000) // 最多重试3次，每次间隔1秒
  .then(result => console.log(result)) // 成功
  .catch(error => console.error(error.message)); // 失败

在这个例子中，myOperation函数使用Promise.withResolvers()创建了一个可控的Promise，模拟了一个可能成功或失败的异步操作。retryOperation函数则负责重试这个操作，直到成功或达到最大重试次数。

总结：Promise.withResolvers()，你的Promise好帮手

Promise.withResolvers()是ES2024带来的一个非常实用的新特性，它可以让你更方便、更优雅地创建可控的Promise。掌握了它，你就可以在各种场景下灵活运用Promise，编写出更简洁、更易维护的代码。

特性	说明	优势
Promise.withResolvers()	创建一个包含promise、resolve和reject属性的对象。	减少样板代码，避免变量污染，更清晰的意图。
应用场景	异步操作封装、单元测试、事件驱动编程、状态管理库实现等。	简化代码，提高可测试性，增强代码可读性。
注意事项	避免死锁，只解决/拒绝一次，处理异常。	保证Promise的正确使用，避免潜在问题。
兼容性	ES2024新特性，部分浏览器可能需要polyfill。	根据目标环境选择合适的兼容方案。

好了，今天的“JavaScript奇技淫巧”小课堂就到这里。希望大家能够喜欢这个新特性，并在实际开发中多多使用它。记住，写代码就像做菜，好的工具能让你事半功倍！ 下课！