Promise 新增的这个 API，挺有用！

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

前言

JavaScript 的异步编程模型是通过 Promise 来简化的，它允许我们以更直观的方式处理异步操作。近期，Promise API 迎来了一项新的扩展——Promise.withResolvers 方法.

静态方法返回一个对象，其包含一个新的 Promise() 对象和两个函数，用于解决或拒绝它，对应于传入给 Promise() 构造函数执行器的两个参数。

这个方法目前已经进入到了 ECMAScript 提案的 Stage 3，预示着它很快会成为 JavaScript 语言规范的一部分，并在日常项目开发中得到广泛应用。

Promise.withResolvers API 介绍

Promise.withResolvers 是一个静态方法，它的引入为处理异步操作提供了一个更加灵活的工具。该方法返回一个包含新的 Promise 对象和两个函数（resolve 和 reject）的对象。这两个函数分别对应于传统 Promise 构造函数执行器（executor function）的两个参数。与传统 Promise 构造函数相比，withResolvers 方法的优势在于解决（resolve）和拒绝（reject）函数与 Promise 对象本身处于同一作用域，使得在复杂的异步处理场景下更加方便和灵活。

cosnt {promise, resolve, reject} = Promise.withResolvers() 完全等同于以下代码：

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

Promise.withResolvers API 基础使用

在 Promise.withResolvers 方法出现之前我们用Promise处理复杂业务逻辑时，以网络请求为例子，模拟一个异步的网络请求，并根据请求的结果执行相应的业务逻辑：

let num = true;
let resolve, reject;

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

num ? resolve("ok") : reject("not ok");

使用 Promise.withResolvers 后，代码变得更加简洁：

let num = true;

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

num ? resolve("ok") : reject("not ok");

从这个简单的例子中可以看出，使用 Promise.withResolvers 可以让代码结构更清晰，减少了变量的声明，使得异步逻辑的处理更加直观。

API 兼容性注意点

虽然 Promise.withResolvers 提供了很大的便利性，但由于它目前还处于 Stage 3 阶段，其兼容性和支持度成为开发者需要注意的问题。预计到 2024 年，这一特性将正式成为 ECMAScript 标准的一部分。然而，在此之前，开发者需要注意：

• 目前主流浏览器尚未全面支持这一特性，例如，谷歌浏览器需要 117 以上的版本才能使用。

• 对于不支持该特性的环境，开发者需要考虑降级方案或者使用 Polyfill 来保证代码的兼容性。

小结

Promise 的这项新功能——withResolvers，提供了一个更加灵活和高效的方式来处理复杂的异步操作。它的引入，预计将大大提升 JavaScript 异步编程的便利性。然而，直到这一特性被所有主流浏览器广泛支持，开发者在使用时还需谨慎考虑兼容性问题。尽管如此，Promise.withResolvers 的潜力和价值是不言而喻的，它无疑将成为未来 JavaScript 异步编程中的重要工具。

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

“分享、点赞、在看” 支持一下