自行实现Promise.allSettled的Polyfill处理_F11 - 专业站长和开发者的学习网站

分享到

自行实现Promise.allSettled的Polyfill处理

JavaScript 来源：互联网作者：佚名发布时间：2022-08-22 09:41:33 人浏览

摘要

引言如果因为浏览器太过老旧，不支持最新的 Promise.allSettled API，我们可以使用 polyfill 技术，简单地自己用 Promise.all, 自行实现 Promise.allSettled. 完整代码实现如下： 1 2 3 4 5 6 7 8 if (!Pr

引言

如果因为浏览器太过老旧，不支持最新的 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 并获取其结果（或错误）。

语法：

1	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 属性中。

语法：

1	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 属性中可用。

您可能感兴趣的文章 :

原文链接 : https://juejin.cn/post/7133033579210080270

Tag : promise(4)

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。