深入剖析 Promise.withResolver

于 2024-05-29 17:50:55 发布
阅读量96 收藏
点赞数
原文链接：https://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw==&mid=2247511721&idx=1&sn=bd3284d434a27673098a02635f0da7cb&chksm=ce171023fd2915e20d7aba315b73f836ae8add8f8e767ce92737a9fcdd8c114a6c64b5786535&scene=126&sessionid=0
版权

本文译者为 360 奇舞团前端开发工程师

原文标题：ECMAScript 2024 feature: Promise.withResolvers()

原文作者：Dr. Axel Rauschmayer

原文地址：https://2ality.com/2024/05/proposal-promise-with-resolvers.html#why-not-promise-deferred

本文将着重探讨 ECMAScript 2024 年的新特性之一 -- "Promise.withResolvers"（由 Peter Klecha 提出）。该特性提供了一种直接创建 Promise 的新方法，可替代 new Promise(...)。

1. new Promise(...) – 构造函数模式

在使用 Promise.withResolvers() 之前，只有一种方法可以直接创建 Promise - 通过以下模式：

const promise = new Promise(
  (resolve, reject) => {
    // ---
  }
);

之所以这样做，根据 JavaScript 的 Promise API 设计团队的 Domenic Denicola 的说法是因为：

  • 我之所以称其为 "揭示型构造器模式"，是因为 Promise 构造器正在揭示其内部功能，但仅限于向构造相关 Promise 的代码揭示。resolve或reject promise的能力只透露给其构造者，关键是不会透露给使用promise的。因此任何人，如果我们将 p 移交给另一个消费者，例如

     doThingsWith(p)；

那么我们就可以确保，这个消费者不会扰乱构造函数向我们透露的任何内部信息。这有别于在 p 上放置任何人都可以调用的resolve和reject。

举例来说，让我们将基于回调的函数转换为基于许诺的函数（注意，Node.js 确实有一个完整的基于许诺的 API，即 node:fs/promises）。

以下代码展示了使用基于回调的函数 fs.readFile() 的场景：

import * as fs from 'node:fs';
fs.readFile('some-file.txt', 'utf-8', (error, result) => {
  if (error !== null) {
    console.error(error);
    return;
  }
  assert.equal(
    result,
    'Content of some-file.txt'
  );
});

接下来让我们实现一个基于 Promise 的 fs.readFile() 版本：

import * as fs from 'node:fs';
function readFileAsync(filePath, encoding) {
  return new Promise(
    (resolve, reject) => {
      fs.readFile(filePath, encoding, (error, result) => {
        if (error !== null) {
          reject(error);
          return;
        }
        resolve(result);
      });
    }
  );
}

assert.equal(
  await readFileAsync('some-file.txt', 'utf-8'),
  'Content of some-file.txt'
);

2. Promise.withResolvers()

揭示构造器模式的一个限制是，settlement函数 resolve 和 reject 不能离开 Promise 构造器回调，也不能与 Promise 分开使用。通过以下静态工厂可以解决这个问题：

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

适用工厂函数就会像是下面这样：

{
  const { promise, resolve, reject } = Promise.withResolvers();
  resolve('fulfilled');
  assert.equal(
    await promise,
    'fulfilled'
  );
}
{
  const { promise, resolve, reject } = Promise.withResolvers();
  reject('rejected');
  try {
    await promise;
  } catch (err) {
    assert.equal(err, 'rejected');
  }
}

2.1 实现

我们可以如下实现 Promise.withResolvers()：

function promiseWithResolvers() {
  let resolve;
  let reject;
  const promise = new Promise(
    (res, rej) => {
      // Executed synchronously!
      resolve = res;
      reject = rej;
    });
  return {promise, resolve, reject};
}

该提案指出了有多少代码库实现了这一功能（这也是为什么现在将其内置到语言中确实是一个好消息）：React、Vue、Axios、TypeScript、Vite、Deno 标准库。

3. promise化基于回调的函数

让我们重温一下之前实现的函数 readFileAsync()。使用新的 API，我们可以将其编写如下：

import * as fs from 'node:fs';
function readFileAsync(filePath, encoding) {
  const { promise, resolve, reject } = Promise.withResolvers();
  fs.readFile(filePath, encoding, (error, result) => {
    if (error !== null) {
      reject(error);
      return;
    }
    resolve(result);
  });
  return promise;
}

这段代码与我们使用 Promise 构造函数时的代码大致相同。让我们继续讨论构造函数无法处理的用例。

4.单元素队列

class OneElementQueue {
  #promise = null;
  #resolve = null;
  constructor() {
    const { promise, resolve } = Promise.withResolvers();
    this.#promise = promise;
    this.#resolve = resolve;
  }
  get() {
    return this.#promise;
  }
  put(value) {
    this.#resolve(value);
  }
}

{ // Putting before getting
  const queue = new OneElementQueue();
  queue.put('one');
  assert.equal(
    await queue.get(),
    'one'
  );
}
{ // Getting before putting
  const queue = new OneElementQueue();
  setTimeout(
    // Runs after `await` pauses the current execution context
    () => queue.put('two'),
    0
  );
  assert.equal(
    await queue.get(),
    'two'
  );
}

5. 具有任意容量的队列

PromiseQueue 是一个潜在的无限队列：

  • .get() 会阻塞，直到有一个值可用。

  • .put(value)是非阻塞的 该代码是对基于 SES 的分布式安全 JavaScript 沙箱 Endo 软件包 stream 中函数 makeQueue() 的轻微重写。请查看该软件包，了解更多使用 makePromiseKit() 的代码，它等同于 Promise.withResolvers()。

class PromiseQueue {
  #frontPromise;
  #backResolve;
  constructor() {
    const { promise, resolve } = Promise.withResolvers();
    this.#frontPromise = promise;
    this.#backResolve = resolve;
  }
  put(value) {
    const { resolve, promise } = Promise.withResolvers();
    // By resolving, we add another (pending) element
    // to the end of the queue
    this.#backResolve({ value, promise });
    this.#backResolve = resolve;
  }
  get() {
    return this.#frontPromise.then(
      (next) => {
        this.#frontPromise = next.promise;
        return next.value;
      }
    );
  }
}

{ // Putting before getting
  const queue = new PromiseQueue();
  queue.put('one');
  queue.put('two');
  
  assert.equal(
    await queue.get(),
    'one'
  );
  assert.equal(
    await queue.get(),
    'two'
  );
}
{ // Getting before putting
  const queue = new PromiseQueue();
  setTimeout(
    // Runs after `await` pauses the current execution context
    () => {
      queue.put('one');
      queue.put('two');
    },
    0
  );
  assert.equal(
    await queue.get(),
    'one'
  );
  assert.equal(
    await queue.get(),
    'two'
  );
}

每个队列元素都是 {value, promise} 的 Promise：

value 是存储在队列元素中的值。promise 是下一个（可能pending的）队列元素。队列的前面和后面：

前面是第一个队列元素（一个 Promise）。后面是最后一个（pending！）队列元素的resolve函数。

6. 可异步迭代的队列

class AsyncIterQueue {
  #frontPromise;
  #backResolve;
  constructor() {
    const { promise, resolve } = Promise.withResolvers();
    this.#frontPromise = promise;
    this.#backResolve = resolve;
  }
  put(value) {
    if (this.#backResolve === null) {
      throw new Error('Queue is closed');
    }
    const { resolve, promise } = Promise.withResolvers();
    this.#backResolve({ done: false, value, promise });
    this.#backResolve = resolve;
  }
  close() {
    this.#backResolve(
      { done: true, value: undefined, promise: null }
    );
    this.#backResolve = null;
  }
  next() {
    if (this.#frontPromise === null) {
      return Promise.resolve({done: true});
    }
    return this.#frontPromise.then(
      (next) => {
        this.#frontPromise = next.promise;
        return {value: next.value, done: next.done};
      }
    );
  }
  [Symbol.asyncIterator]() {
    return this;
  }
}

{ // Putting before async iteration
  const queue = new AsyncIterQueue();
  queue.put('one');
  queue.put('two');
  queue.close();
  assert.deepEqual(
    await Array.fromAsync(queue),
    ['one', 'two']
  );
}
{ // Async iteration before putting
  const queue = new AsyncIterQueue();
  setTimeout(
    // Runs after `await` pauses the current execution context
    () => {
      queue.put('one');
      queue.put('two');
      queue.close();
    },
    0
  );
  assert.deepEqual(
    await Array.fromAsync(queue),
    ['one', 'two']
  );
}

与之前的实现相比，变化不大：

方法 .next() 和 .Symbol.asyncIterator是 AsyncIterable 接口的声名和实现。队列元素现在是{value, done, promise}的 Promise。.close()通过向队列添加最后一个元素，让我们可以关闭队列：{done: true, value: undefined, promise: null }

7. 常见问题

  • 7.1 为什么不使用 Promise.deferred()（或 Promise.defer()）？

只有了解 Promises 历史的人才能理解 "deferred "这个名称：这是 jQuery 的 "Promise API" 中使用的名称。如果你是 JavaScript 的新手，这个名字对你来说没有任何意义。

  • 7.2 为什么使用 "resolvers "而不是 "settlers "这个名称？

通过 resolve() 解析 Promise 只意味着确定了它的"命运"：

  • 它可以解决 Promise 的问题：

const {promise, resolve} = Promise.withResolvers()；
resolve(123); // 解决了`promise`。

  • 但它也可能将 Promise 的状态锁定为另一个 Promise 的状态。而后一个 Promise 可能永远处于pending状态（永远无法settle）：

const {promise, resolve} = Promise.withResolvers()；
resolve(new Promise(() => {}); // `promise` is forever pending

因此，resolve 和 reject 通常只能解析 Promise，而不会settle。

a5bc54b26af3e2e333c6ee01d4299d41.png

[图片来源：proposal-promise-with-resolvers:issues[1]]

此外，ECMAScript 规范将 resolve 和 reject 命名为 "resolving functions"。

参考资料

[1]

https://github.com/tc39/proposal-promise-with-resolvers/issues/2#issuecomment-1554692517: https://github.com/tc39/proposal-promise-with-resolvers/issues/2#issuecomment-1554692517

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

5480aab9869e63138e0d2f401d83ae2b.png

奇舞周刊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
es6-promise.auto.js
10-31
-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] [removed][removed] <!-- Minified version of `es6-promise-auto` below. --> [removed][removed] ...
Java实现Promise.all()的示例代码
08-27
Java实现Promise.all()示例代码详解 在Java中实现Promise.all()的示例代码，提供了一个使用CountDownLatch和ThreadPoolExecutor来实现并发执行异步请求的解决方案。下面将详细介绍这个示例代码的实现思路和知识点。...
全新API——Promise.withResolvers
weixin_43537322的博客
02-07 861
简介了Promise.withResolvers方法，它提供了一种简洁而灵活的处理Promise的方式。通过返回包含Promise对象和解决/拒绝函数的对象，该方法使得处理Promise的状态更方便，并可用于各种场景，如处理流和队列。此外，它还支持非Promise构造函数，增加了更多的应用可能性。使用Promise.withResolvers可以让我们以更优雅的方式处理Promise，并使代码更易读和维护。
ES15新特性
qq_43641110的博客
03-20 1259
例如，Unicode 码点 U+10000（这是 BMP 之外的第一个码点）在 UTF-16 中的编码就是高代理码元 U+D800 和低代理码元 U+DC00 的组合，即 “D800 DC00”。ArrayBuffer 实例的 resize() 方法将 ArrayBuffer 调整为指定的大小，以字节为单位，前提是该 ArrayBuffer 是可调整大小的并且新的大小小于或等于该 ArrayBuffer 的 maxByteLength。使用 u 标志后，你可以匹配和处理任何有效的 Unicode 字符。
`Promise.withResolvers` - 更简单、更直观的异步控制
gitblog_00058的博客
05-28 415
Promise.withResolvers - 更简单、更直观的异步控制 项目地址:https://gitcode.com/tc39/proposal-promise-with-resolvers 在JavaScript的世界里，Promise是处理异步操作的重要工具。然而，当你需要在创建Promise之后配置其解析和拒绝行为时，传统的做法可能会显得繁琐。为此，我们向您推荐一个正在提案的增强功能—...
深入理解Promise.all
singularity（奇点）
03-29 2972
深入理解Promise.all 了解es6的Promise的人应该都听过Promise.all，而且应该是大多数的人都用过Promise.all这个方法。首先Promise.all可以将多个Promise实例包装成一个Promise实例。 let p = Promise.all([p1, p2, p3]) Promise.all方法可以接受一个数组作为参数，数组中的每一项都是一个Promise的对象实例（如果不是，就会先调用Promise.reslove方法，将参数转化为Promise对象实例，再进行下一
Promise.all 方法详解
热门推荐
潮汐未见潮落的博客
06-20 8万+
promise.all 的详细讲解，并包括 promise.all 手写代码
Promise.all、Promise.allSettled、Promise.any、Promise.race
m0_68324632的博客
08-23 5751
Promise的实例方法拓展 Promise.all() ：方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 Promise.allSettled()：用来确定一组异步操作是否都结束了（不管成功或失败）。所以，它的名字叫做”Settled“，包含了”fulfilled“和”rejected“两种情况。 Promise.any()：ES2021 引入了Promise.any()方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。 Promi
理解promise.all和promise.allSettled
baidu_41601048的博客
01-21 2803
在工作中经常会遇到这样一个场景，在一个页面中可能会加载多个异步请求。为了性能。一般会通过Promise.all[async func1,async func2 ..]，但是promise.all会隐藏一个风险。当其中一个异步请求挂掉时，它会把挂掉的结果作为返回值。这显然不是我们想要的。我们需要哪怕其中一个或者多个挂掉了，你依然可以把整个结果数组返回给我。同时其他请求不受到影响。 接下来我们尝试手动实现一个这样的方法,我们暂且加它allSettled 在实现之前。我们需要了解几个要点： 1 allSet
Promise：Promise.all、Promise.race、Promise.any的用法及区别
Pioneer
09-18 6923
在项目开发过程中经常需要通过异步编程来实现功能，此时就需要我们了解Promise. Promise Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。 一个Promise的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected），状态的改变只能是单向的，且变化后不可在改变。 一个Promise必须提供一个 then
Promise.race()方法
imkaifan的博客
08-31 1万+
Promise.race()方法 Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。 const p = Promise.race([p1, p2, p3]); 上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。 Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resol
promise.all()使用
weixin_42978193的博客
06-14 5231
promise.all()用法
es6-promise.auto.min.js
05-17
es6-promise.auto.min.js
ROS安装配置与语法介绍文档、ROS代码文档、树莓派与ROS结合使用等相关文档
最新发布
07-08
ROS安装配置与语法介绍文档、ROS代码文档、树莓派与ROS结合使用等相关文档
2003-2023年飞机航线信息数据.xlsx
07-08
2003-2023年飞机航线信息数据 1、时间：2003-2023年 2、来源：高铁航线数据库（Chinese High-speed Rail and Airline Database，CRAD） 3、指标：起点城市、起点城市所属地级市、起点城市所属省份、起点机场、终点城市、终点城市所属地级市、终点城市所属省份、终点机场、航空公司、更新日期、航班、出发时间、到达时间、准点率、班次_周一、班次_周二、班次_周三、班次_周四、班次_周五、班次_周六、班次_周日
Xilinx Vitis 2020工程源目录修改
07-08
Xilinx Vitis可以做standalone程序开发,不过其工程中使用的路径为绝对路径。工程更换位置后编译将会显示错误。例如：源目录为D:/work,复制到同事电脑上放到C:/work(同事电脑只有一个C盘)。利用Vitis打开工程编译会有一堆错误，提示文件找不到。本脚本用来解决该问题。
1000__gpt_4_prompts.md
07-08
1000__gpt_4_prompts
promise.all promise.race 区别
09-06
promise.all和.promise.race都是Promise的方法，但是它们的作用不同。 promise.all方法接收一个Promise数组作为参数，返回一个新的Promise对象，当所有的Promise对象都成功时，返回的Promise对象才会成功，返回的值是一个数组，数组中的值是每个Promise对象的返回值。如果其中任何一个Promise对象失败，返回的Promise对象就会失败，失败的原因是第一个失败的Promise对象的错误信息。 promise.race方法也接收一个Promise数组作为参数，返回一个新的Promise对象，当其中任何一个Promise对象成功或失败时，返回的Promise对象就会成功或失败，返回的值是第一个成功或失败的Promise对象的返回值。 因此，promise.all和promise.race的区别在于，promise.all要求所有的Promise对象都成功，而promise.race只要求其中任何一个Promise对象成功或失败。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值