脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → Promise.allSettled Polyfill处理

自行实现Promise.allSettled的Polyfill处理

 更新时间：2022年08月18日 14:13:29   作者：JerryWang_sap  
这篇文章主要为大家介绍了自行实现Promise.allSettled 的 Polyfill处理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

如果因为浏览器太过老旧，不支持最新的 Promise.allSettled API，我们可以使用 polyfill 技术，简单地自己用 Promise.all, 自行实现 Promise.allSettled.

完整代码实现如下：

if (!Promise.allSettled) {
  const rejectHandler = reason => ({ status: 'rejected', reason });
  const resolveHandler = value => ({ status: 'fulfilled', value });
  Promise.allSettled = function (promises) {
    const convertedPromises = promises.map(p => Promise.resolve(p).then(resolveHandler, rejectHandler));
    return Promise.all(convertedPromises);
  };
}

在这段代码中，promises.map 接受输入值，使用 p => Promise.resolve(p) 将它们转换为 Promise（以防传递了非 Promise 类型的 primitive 值），然后将 .then 处理程序添加到每个值。

该处理程序将成功的结果值转换为 {status:'fulfilled', value}，并将错误原因转换为 {status:'rejected', reason}。 这正是 Promise.allSettled 的格式。

现在我们可以使用 Promise.allSettled 来获取所有给定 Promise 的结果，即使其中一些被 reject.

Promise.race

与 Promise.all 类似，但仅等待第一个已经 resolved 的 Promise 并获取其结果（或错误）。

语法：

let promise = Promise.race(iterable);

下列代码将会打印第一个状态变为 fulfilled 的 Promise 的值，即1：

Promise.race([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1

这里的第一个promise是最快的，所以就变成了结果。 在第一个确定的 Promise win the race之后，所有进一步的结果/错误都将被忽略。

Promise.any

与 Promise.race 类似，但只等待第一个 fulfilled 的 Promise 并获得其结果。 如果所有给定的 Promise 都被拒绝，则返回的 Promise 会被 AggregateError 拒绝——这是一个特殊的错误对象，它将所有 Promise 错误存储在它的 errors 属性中。

语法：

let promise = Promise.any(iterable);

下列例子结果为1：

Promise.any([
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1

这里的第一个promise是最快的，但是被 reject 了，所以第二个promise就变成了结果。 在第一个 fulfilled 的 Promise win the race 之后，所有进一步的结果都将被忽略。

这是一个所有 Promise 都失败的例子：

Promise.any([
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Ouch!")), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Error!")), 2000))
]).catch(error => {
  console.log(error.constructor.name); // AggregateError
  console.log(error.errors[0]); // Error: Ouch!
  console.log(error.errors[1]); // Error: Error!
});

如我们所见，失败的 Promise 的错误对象在 AggregateError 对象的 errors 属性中可用。

以上就是Promise.allSettled 的 Polyfill 处理的详细内容，更多关于Promise.allSettled Polyfill 处理的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 微信小程序 后台登录（非微信账号）实例详解

    微信小程序 后台登录（非微信账号）实例详解

    这篇文章主要介绍了微信小程序 后台登录（非微信账号）实例详解的相关资料,需要的朋友可以参考下
    2017-03-03
  • 基于JavaScript ES新特性let与const关键字

    基于JavaScript ES新特性let与const关键字

    这篇文章主要介绍了基于JavaScript ES新特性let与const关键字，let是ECMAScript 2015新增的一个关键字，用于声明变量，const关键字用于声明一个常量，更多详细内容，请需要的小伙伴参考下面文章的介绍，希望对你有所帮助
    2021-12-12
  • 微信小程序 实战小程序实例

    微信小程序 实战小程序实例

    这篇文章主要介绍了微信小程序 实战小程序实例的相关资料,需要的朋友可以参考下
    2016-10-10
  • 移动开发之自适应手机屏幕宽度

    移动开发之自适应手机屏幕宽度

    这篇文章主要介绍了移动开发之自适应手机屏幕宽度的相关资料,网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方,需要的朋友可以参考下
    2016-11-11
  • 详解如何发布TypeScript编写的npm包

    详解如何发布TypeScript编写的npm包

    这篇文章主要介绍了如何发布TypeScript编写的npm包实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 详解JS前端使用迭代器和生成器原理及示例

    详解JS前端使用迭代器和生成器原理及示例

    这篇文章主要为大家介绍了详解JS前端使用迭代器和生成器原理及示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • 微信小程序 转发功能的实现

    微信小程序 转发功能的实现

    这篇文章主要介绍了微信小程序 转发功能的实现的相关资料,这里提供实现方法及实例帮助大家学习理解，需要的朋友可以参考下
    2017-08-08
  • 微信小程序 侧滑删除（左滑删除）

    微信小程序 侧滑删除（左滑删除）

    这篇文章主要介绍了微信小程序 侧滑删除（左滑删除）的相关资料,需要的朋友可以参考下
    2017-05-05
  • Canvas如何判断点在形状内及内置API性能详解

    Canvas如何判断点在形状内及内置API性能详解

    这篇文章主要为大家介绍了Canvas如何判断点在形状内及内置API性能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • JavaScript对象(详细)

    JavaScript对象(详细)

    这篇文章主要介绍了Java中的Script对象的相关资料,需要的朋友可以参考下文章里内容
    2021-08-08

最新评论