自行实现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 处理的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了TypeScript 内置高级类型编程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
JavaScript ES6语法中let,const ,var 的区别
这篇文章主要为大家介绍了JavaScript中let,const ,var 的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
[绿色]超强图片数量上传无限制...2006-06-06
这篇文章主要为大家介绍了Electron 网络拦截实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
TypeScript中Module使用区别及模块路径解析规则
这篇文章主要为大家介绍了TypeScript中Module使用区别及模块路径解析规则，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家以实践示例理解js强缓存协商缓存，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了微信小程序 使用腾讯地图SDK详解及实现步骤的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要为大家介绍了js中yield参数应用示例深入理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
本文主要介绍Google Maps基础,这里对Google Maps的知识做了详细解析，并提供代码示例作为学习参考，有兴趣的朋友可以看一下2016-08-08
这篇文章主要介绍了打包非 JavaScript 静态资源，打包工具中的自定义导入，种常见的方法是利用已有的静态导入语法。有些打包工具可能会通过文件扩展名来自动检测格式，而有些其他打包工具则允许插件使用自定义的 URL Scheme，下面具体内举例说明,需要的朋友可以参考一下2021-10-10
最新评论