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

悠悠 2024-03-22 18:03 10阅读 0赞

### 一文搞懂 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][] 查看

### 区别 ###

<table> 
 <thead> 
  <tr> 
   <th>功 能</th> 
   <th><code>Promise.all</code></th> 
   <th><code>Promise.allSettled</code></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>并发</td> 
   <td>✅</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>并发Promise中出现&nbsp;<code>reject</code>&nbsp;是否还走&nbsp;<code>then</code></td> 
   <td>❌</td> 
   <td>✅</td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 在不支持 `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,
    					})
    				)
    			)
    		);
    	};
    }

当下敲的每一个字母，都将在未来的某天回报于自己~

[lib.es2020.promise.d.ts]: https://github.com/microsoft/TypeScript/blob/main/src/lib/es2020.promise.d.ts
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all