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

  • 一文搞懂 Promise 新 Api allSettled 的用法和 all 区别,以及如何在不支持新特性的环境下实现一个 Polyfill已关闭评论
  • 137 次浏览
  • A+
所属分类:Web前端

开始

一文搞懂 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 来做错误捕获
  • 对象中还有另外两个属性,valuereason。根据 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, 					}) 				) 			) 		); 	}; }