一文搞懂 Promise 新 Api allSettled 的用法和 all 区别，以及如何在不支持新特性的环境下实现一个 Polyfill-Toy模板网

这篇具有很好参考价值的文章主要介绍了一文搞懂 Promise 新 Api allSettled 的用法和 all 区别，以及如何在不支持新特性的环境下实现一个 Polyfill。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

开始

一文搞懂 Promise 新 Api allSettled 的用法和 all 区别，以及如何在不支持新特性的环境下实现一个 Polyfill

allSettled 的用法

const runAllSettled = async () => {
    const successPromise = Promise.resolve('success') // 一个正常返回的 Promise
    const failPromise = Promise.reject('fail') // 一个异常返回的 Promise
    // 使用 allSettled
    const settiled = await Promise.allSettled([successPromise, failPromise, undefined, null])
    console.log(settiled)
    /*  输出结果如下
            [
                {status: 'fulfilled', value: 'success'},
                {status: 'rejected', reason: 'fail'},
                {status: 'fulfilled', value: undefined},
                {status: 'fulfilled', value: null},
            ]
    */
}
runAllSettled()

返回一个数组，每一个元素都是一个对象，里面必然包含 status 属性
status 属性只会有两个值，fulfilled 或者 rejected，非黑即白的既即视感
allSettled 总是走 then 的，也就是并发的 Promise 出现 reject 也不会走 catch，需要自行遍历返回的数组，判断 status 来做错误捕获
对象中还有另外两个属性，value 和 reason。根据 promise 的状态返回，如果成功返回，即为 value，反之为 reason
更详细的 TS 类型在这里 lib.es2020.promise.d.ts

all 的用法

all 的用法就不再详细赘述，可前往 MDN 查看

区别

功能	`Promise.all`	`Promise.allSettled`
并发	✅	✅
并发Promise中出现 `reject` 是否还走 `then`	❌	✅

在不支持 Promise.allSettled 新特性的环境下实现一个 Polyfill

// 通过 Promise.all 实现 Promise.allSettled
if (!Promise.allSettled) {
	Promise.allSettled = function (promises) {
		return Promise.all(
			promises.map((p) =>
				Promise.resolve(p).then(
					(value) => ({
						status: "fulfilled",
						value,
					}),
					(reason) => ({
						status: "rejected",
						reason,
					})
				)
			)
		);
	};
}

文章来源地址https://www.toymoban.com/news/detail-428101.html

到了这里，关于一文搞懂 Promise 新 Api allSettled 的用法和 all 区别，以及如何在不支持新特性的环境下实现一个 Polyfill的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！