第179题：Promise.allSettled 的作用，如何自己实现 Promise.allSettled

[sisterAn]

[Xchen1995]

  static allSet = (arr) => {
    new MyPromise((resolve) => {
      let result = [];
      let index = 0;
      let addIndex = (key, value, status) => {
        let obj = {
          status,
          value
        }
        result[key] = obj
        index++;
        if (index === arr.length) {
          resolve(result);
        }
      };
      for (let i = 0; i < arr.length; i++) {
        let cur = arr[i];
        if (cur instanceof MyPromise) {
          cur.then(
            (value) => {
              addIndex(i, value, 'fulfilled')
            },
            (reason) => {
              addIndex(i, reason, 'rejected')
            }
          );
        } else {
          addIndex(i, cur, 'fulfilled')
        }
      }
    });
  };

[sisterAn]

引言

本文从四个方面循序渐进介绍 Promise.allSettled ：

• Promise.all() 的缺陷
• 引入 Promise.allSettled()
• Promise.allSettled() 与 Promise.all() 各自的适用场景
• 手写 Promise.allSettled() 实现

下面正文开始👇

Promise.all() 的缺陷

我们在之前的一篇文章中 第 80 题：介绍下 Promise.all 使用、原理实现及错误处理 已经介绍过，当我们使用 Promise.all() 执行过个 promise 时，只要其中任何一个promise 失败都会执行 reject ，并且 reject 的是第一个抛出的错误信息，只有所有的 promise 都 resolve 时才会调用 .then 中的成功回调

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = new Promise((resolve, reject) => {
  setTimeout(reject, 1000, 'three');
});

Promise.all([p1, p2, p3])
.then(values => {
    console.log('resolve: ', values)
}).catch(err => {
    console.log('reject: ', err)
})	

// reject:  three

注意： 其中任意一个 promise 被 reject ，Promise.all 就会立即被 reject ，数组中其它未执行完的 promise 依然是在执行的， Promise.all 没有采取任何措施来取消它们的执行

但大多数场景中，我们期望传入的这组 promise 无论执行失败或成功，都能获取每个 promise 的执行结果，为此，ES2020 引入了 Promise.allSettled()

Promise.allSettled()

Promise.allSettled() 可以获取数组中每个 promise 的结果，无论成功或失败

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = new Promise((resolve, reject) => {
  setTimeout(reject, 1000, 'three');
});

Promise.allSettled([p1, p2, p3])
.then(values => {
    console.log(values)
})	

/*
[
  {status: "fulfilled", value: 1}, 
  {status: "fulfilled", value: 2}, 
  {status: "rejected", reason: "three"}
]
*/

当浏览器不支持 Promise.allSettled ，可以如此 polyfill：

if (!Promise.allSettled) {
  const rejectHandler = reason => ({status: "rejected", reason})
  const resolveHandler = value => ({status: "fulfilled", value})
  Promise.allSettled = promises =>
    Promise.all(
      promises.map((promise) =>
        Promise.resolve(promise) 
          .then(resolveHandler, rejectHandler)
      )
      // 每个 promise 需要用 Promise.resolve 包裹下
      // 以防传递非 promise
    );
}

// 使用
const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = new Promise((resolve, reject) => {
  setTimeout(reject, 1000, 'three');
})
const promises = [p1, p2, p3]
Promise.allSettled(promises).then(console.log)

Promise.allSettled() 与 Promise.all() 各自的适用场景

Promise.allSettled() 更适合：

• 彼此不依赖，其中任何一个被 reject ，对其它都没有影响
• 期望知道每个 promise 的执行结果

Promise.all() 更适合：

• 彼此相互依赖，其中任何一个被 reject ，其它都失去了实际价值

手写 Promise.allSettled 源码

与 Promise.all 不同的是，当 promise 被 reject 之后，我们不会直接 reject ，而是记录下该 reject 的值和对应的状态 'rejected' ；

同样地，当 promise 对象被 resolve 时我们也不仅仅局限于记录值，同时也会记录状态 'fulfilled' 。

当所有的 promise 对象都已执行（解决或拒绝），我们统一 resolve 所有的 promise 执行结果数组

MyPromise.allSettled = function (promises) {
    return new MyPromise((resolve, reject) => {
      promises = Array.isArray(promises) ? promises : []
      let len = promises.length
      const argslen = len
      // 如果传入的是一个空数组，那么就直接返回一个resolved的空数组promise对象
      if (len === 0) return resolve([])
      // 将传入的参数转化为数组，赋给args变量
      let args = Array.prototype.slice.call(promises)
      // 计算当前是否所有的 promise 执行完成，执行完毕则resolve
      const compute = () => {
        if(--len === 0) { 
          resolve(args)
        }
      }
      function resolvePromise(index, value) {
        // 判断传入的是否是 promise 类型
        if(value instanceof MyPromise) { 
          const then = value.then
          then.call(value, function(val) {
            args[index] = { status: 'fulfilled', value: val}
            compute()
          }, function(e) {
            args[index] = { status: 'rejected', reason: e }
            compute()
          })
        } else {
          args[index] = { status: 'fulfilled', value: value}
          compute()
        }
      }
   
      for(let i = 0; i < argslen; i++){
        resolvePromise(i, args[i])
      }
    })
  }

Promise.allSettled 简写

由于 Promise.allSettled 判断数组元素太过于繁琐，所以这里可以直接使用 Promise.reslove 包装

MyPromise.allSettled = function(values) {
  let promises = [].slice.call(values)
  return new MyPromise((resolve, reject) => {
    let result = [], count = 0
    promises.forEach(promise => {
      MyPromise.resolve(promise).then(value=>{
        result.push({status: 'fulfilled', value})
      }).catch(err=>{
        result.push({status: 'rejected', value: err})
      }).finally(()=>{
        if(++count === promise.length) {
          resolve(result)
        }
      })
    })
  })
}

总结

彼此相互依赖，一个失败全部失效（全无或全有）用 Promise.all ；相互独立，获取每个结果用 Promise.allSettled

原文

[jackluson]

Tip:

该 Promise.allSettled()方法返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise，并带有一个对象数组，每个对象表示对应的 promise 结果。

当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个 promise 的结果时，通常使用它。

相比之下，Promise.all() 更适合彼此相互依赖或者在其中任何一个 reject 时立即结束。参考MDN

结果按照 promise 数组顺序输出

Promise.myAllSettled = function (alls) {
  return new Promise(async (resolve, reject) => {
    const res = [];
    alls.forEach(async (pr, index) => {
      try {
        const value = await pr;
        res.splice(index, 0, { status: "fulfilled", value });
        if (res.length === alls.length) {
          resolve(res);
        }
      } catch (reason) {
        res.splice(index, 0, { status: "rejected", reason });
        if (res.length === alls.length) {
          resolve(res);
        }
      }
    });
  });
};

const pErr = new Promise((resolve, reject) => {
  reject("总是失败");
});

const pSlow = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "最终完成");
});

const pFast = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "很快完成");
});

Promise.myAllSettled([pErr, pSlow, pFast]).then((value) => {
  console.log(value);
});

更多