Promise 新 API 来袭：效率提升 300%！开发者必备神器！

哈喽,大家好我是 xy👨🏻‍💻。今天给大家分享一个 Promise 新出了个方法：Promise.withResolvers()

在程序开发的世界里，异步无处不在！！！

在前端开发过程中，如果遇到需要等待一次请求成功之后再去执行之后的操作等其它异步场景。

最原始的解决方式通常是使用 callback 回调函数来解决，但是 callback 带来的问题就是可能会出现无限的回调地狱问题。

而 Promise 的出现，正是解决了回调地狱的问题，还为 async await 的出现做了垫脚石。

提出问题

大家每次在写 Promise 的时候，大家是否会发现还是需要手写回调函数，并且想要把 resolve 传出来还需要在外面定义好一个变量，然后再到回调函数中去赋值：

js 复制代码

let resolve, reject;
const promise = new Promise((res, rej) => {
  // 还是回调函数
  resolve = res;
  reject = rej;
});

resolve(data);
reject(error);

在没有 Promise.withResolvers() 之前，基本上都是以上写法！！！

解决问题

Promise.withResolvers() 方法返回一个对象，其包含一个新的 Promise 对象和两个函数 resolve 和 reject，对应于传入给 Promise() 构造函数执行器的两个参数。

使用 Promise.withResolvers() 优化后的代码：

js 复制代码

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

resolve(data);
reject(error);

很明显的发现，当我们单独使用 resolve 和 reject 时，用上 Promise.withResolvers() ，不需要再定义一个多余的变量去存储。

使用 Promise.withResolvers() 关键的区别在于 resolve 和 reject 函数与 Promise 本身处于同一作用域，而不是在执行器中被创建和一次性使用。这可能使得一些更高级的用例成为可能，

例如在重复事件中重用它们，特别是在处理流和队列时。这通常也意味着相比在执行器内包装大量逻辑，嵌套会更少。

js 复制代码

async function* readableToAsyncIterable(stream) {
  let { promise, resolve, reject } = Promise.withResolvers();
  stream.on("error", (error) => reject(error));
  stream.on("end", () => resolve());
  stream.on("readable", () => resolve());

  while (stream.readable) {
    await promise;
    let chunk;
    while ((chunk = stream.read())) {
      yield chunk;
    }
    ({ promise, resolve, reject } = Promise.withResolvers());
  }
}

兼容性

目前 MDN 给出的兼容兼容性是：谷歌需要 119 及以上的版本才能使用这个方法。

参考连接:

developer.mozilla.org/zh-CN/docs/...

写在最后

公众号：前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞 👍 或者 ➕关注 都是对我最大的支持。

欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

欢迎加我好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

WX: xuxuxu_yyy

关注公众号后，在首页：

回复 面试题，获取最新大厂面试资料。
回复简历，获取 3200 套简历模板。
回复React实战，获取 React 最新实战教程。
回复Vue实战，获取 Vue 最新实战教程。
回复ts，获取 TypeScript 精讲课程。
回复vite，获取 Vite 精讲课程。
回复uniapp，获取 uniapp 精讲课程。
回复js书籍，获取 js 进阶必看书籍。
回复Node，获取 Nodejs+koa2 实战教程。
回复数据结构算法，获取数据结构算法教程。
回复架构师，获取架构师学习资源教程。
更多教程资源应有尽有，欢迎关注获取