JavaScript内核与高级编程之：`JavaScript`的`Promise.withResolvers`：其在`Promise`创建中的新提案。

喂，大家好！我是今天的主讲人。今天咱们聊点新鲜玩意儿，关于 JavaScript 里 Promise 的一个新提案：Promise.withResolvers。 准备好迎接一些让你眼前一亮的代码和概念了吗？Let’s dive in!

一、Promise 的老朋友和新伙伴

要了解 Promise.withResolvers，咱们先回顾一下 Promise 的基本用法。Promise 就像一个承诺，代表着一个异步操作的最终完成（或失败）及其结果值。

以前我们创建 Promise 的方式通常是这样的：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const data = "Hello, Promise!";
    resolve(data); // 成功时调用 resolve
    // reject("Something went wrong!"); // 失败时调用 reject
  }, 1000);
});

myPromise.then(
  (data) => {
    console.log("Promise resolved:", data);
  },
  (error) => {
    console.error("Promise rejected:", error);
  }
);

在这个例子里，我们通过 new Promise() 创建了一个 Promise 实例，并且在构造函数中传入了一个执行器函数。这个执行器函数接收 resolve 和 reject 两个参数，分别用于在异步操作成功和失败时改变 Promise 的状态。

现在，Promise.withResolvers 来了，它提供了一种更简洁、更结构化的方式来创建 Promise。 它的主要目的是将 Promise 的创建和解决/拒绝的操作分离，使得代码更易读和维护。

二、Promise.withResolvers：闪亮登场

Promise.withResolvers 是一个静态方法，直接调用 Promise.withResolvers() 就能返回一个包含三个属性的对象：

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

这三个属性都属于同一个对象，方便我们管理和使用。

让我们看看使用 Promise.withResolvers 的代码：

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

// 异步操作
setTimeout(() => {
  const data = "Hello, Promise.withResolvers!";
  resolve(data); // 成功时调用 resolve
  // reject("Something went wrong!"); // 失败时调用 reject
}, 1000);

promise.then(
  (data) => {
    console.log("Promise resolved:", data);
  },
  (error) => {
    console.error("Promise rejected:", error);
  }
);

是不是感觉更清晰了？ resolve 和 reject 函数不再需要嵌套在 new Promise() 的构造函数里了。它们可以像普通函数一样，在任何地方被调用。

三、Promise.withResolvers 的优势：条理清晰，代码更美观

• 解耦： 将 Promise 的创建和解决/拒绝操作分离开来，降低了代码的耦合度。
• 可读性： 代码结构更清晰，易于理解和维护。
• 作用域： resolve 和 reject 函数的作用域更加明确，避免了潜在的命名冲突。
• 减少嵌套： 避免了 new Promise() 构造函数内部的嵌套，使代码更简洁。

让我们通过一个更复杂的例子来进一步体会 Promise.withResolvers 的优势。 假设我们需要创建一个 Promise，这个 Promise 的解决或拒绝依赖于多个异步操作的结果。

传统方式：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
}

Promise.all([
  fetchData("https://api.example.com/data1"),
  fetchData("https://api.example.com/data2"),
])
  .then((results) => {
    console.log("All data fetched:", results);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

使用 Promise.withResolvers：

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

function fetchData(url) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      // 在这里决定何时 resolve
      // 这里不能直接resolve整个promise，而是要处理数据
      return data;
    })
    .catch((error) => {
      reject(error);
    });
}

Promise.all([
  fetchData("https://api.example.com/data1"),
  fetchData("https://api.example.com/data2"),
])
  .then((results) => {
    resolve(results); // 所有数据都成功获取后，解决 Promise
    console.log("All data fetched:", results);
  })
  .catch((error) => {
    reject(error); // 任何一个数据获取失败，拒绝 Promise
    console.error("Error fetching data:", error);
  });

promise.then(
  (data) => {
    console.log("Promise resolved:", data);
  },
  (error) => {
    console.error("Promise rejected:", error);
  }
);

在这个例子中，Promise.withResolvers 使得我们可以在 Promise.all 的 then 和 catch 回调函数中灵活地控制 Promise 的解决和拒绝。

四、适用场景：让你的代码更优雅

Promise.withResolvers 特别适用于以下场景：

• 需要手动控制 Promise 状态的场景： 例如，当 Promise 的解决或拒绝依赖于多个异步操作的结果时。
• 需要将 Promise 的创建和解决/拒绝操作分离的场景： 例如，当需要在不同的函数或模块中控制 Promise 的状态时。
• 需要编写更具可读性和可维护性的代码的场景： 尤其是在大型项目中，清晰的代码结构至关重要。
• 回调函数风格迁移到Promise风格: 可以很方便的将原有的回调函数形式，转换成Promise的形式。

五、注意事项：避免踩坑

虽然 Promise.withResolvers 很好用，但也需要注意一些事项：

• 不要多次调用 resolve 或 reject： Promise 的状态一旦改变，就不能再次改变。多次调用 resolve 或 reject 会导致错误。
• 确保 resolve 和 reject 在正确的时机被调用： 如果忘记调用 resolve 或 reject，Promise 将永远处于 pending 状态。
• 正确处理错误： 始终使用 try...catch 语句或 Promise 的 catch 方法来处理异步操作中可能发生的错误。
• 检查浏览器兼容性： 确保你的目标浏览器支持 Promise.withResolvers。如果不支持，可以使用 polyfill。

六、代码示例：更多用法，更多灵感

示例 1：使用 Promise.withResolvers 实现一个简单的超时功能。

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

  const timer = setTimeout(() => {
    reject(new Error("Timeout!"));
  }, ms);

  return promise.finally(() => clearTimeout(timer));
}

timeout(2000)
  .then(() => {
    console.log("Operation completed within timeout.");
  })
  .catch((error) => {
    console.error("Operation timed out:", error);
  });

示例 2：将回调函数转换为 Promise。

function fetchDataWithCallback(url, callback) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => callback(null, data))
    .catch((error) => callback(error, null));
}

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

  fetchDataWithCallback(url, (error, data) => {
    if (error) {
      reject(error);
    } else {
      resolve(data);
    }
  });

  return promise;
}

fetchDataWithPromise("https://api.example.com/data")
  .then((data) => {
    console.log("Data fetched:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

七、兼容性：Polyfill 来帮忙

虽然 Promise.withResolvers 越来越普及，但并非所有浏览器都原生支持它。 为了确保你的代码在旧版本浏览器中也能正常运行，可以使用 polyfill。

一个简单的 polyfill 实现如下：

if (Promise.withResolvers === undefined) {
  Promise.withResolvers = function () {
    let resolve, reject;
    const promise = new Promise((res, rej) => {
      resolve = res;
      reject = rej;
    });
    return { promise, resolve, reject };
  };
}

将这段代码放在你的 JavaScript 代码的开头，就可以为不支持 Promise.withResolvers 的浏览器提供兼容性支持。

八、总结：拥抱新特性，提升代码质量

Promise.withResolvers 是一个非常有用的新特性，它可以帮助我们编写更清晰、更易于维护的异步代码。 掌握 Promise.withResolvers 的用法，可以显著提升你的 JavaScript 编程技能。

特性	优点	适用场景	注意事项
解耦	将 Promise 的创建和解决/拒绝操作分离开来，降低代码的耦合度。	需要手动控制 Promise 状态的场景，需要在不同的函数或模块中控制 Promise 的状态时。	不要多次调用 resolve 或 reject，确保 resolve 和 reject 在正确的时机被调用，正确处理错误。
可读性	代码结构更清晰，易于理解和维护。	需要编写更具可读性和可维护性的代码的场景，大型项目中。	检查浏览器兼容性。
作用域	resolve 和 reject 函数的作用域更加明确，避免了潜在的命名冲突。	回调函数风格迁移到Promise风格。
减少嵌套	避免了 new Promise() 构造函数内部的嵌套，使代码更简洁。

希望今天的讲座对你有所帮助。 记住，熟能生巧，多写代码，多实践，才能真正掌握 Promise.withResolvers 的精髓。 下次再见！