Promise.allSettled理解

ES6引入的Promise极大地提升了我们在写js应用的编码体验, 我们可以很方便得使用Promise进行异步流程控制, 但是有一种情况处理起来其实很是不方便, 这就是Promise.allSettled提案的存在理由.

举例说明, 比如我们用户在页面上面同时填了3干个独立的表单, 这三个表单分三个接口提交到后端, 三个接口独立, 没有顺序依赖, 这个时候我们需要等到请求全部完成后给与用户提示表单提交的情况

分析: 在多个promise同时进行时我们很快会想到使用Promise.all来进行包装, 但是由于Promise.all的短路特性, 三个提交中若前面任意一个提交失败, 则后面的表单也不会进行提交了, 这就与我们需求不符合.

Promise.allSettled跟Promise.all类似, 其参数接受一个Promise的数组, 返回一个新的Promise, 唯一的不同在于, 其不会进行短路, 也就是说当Promise全部处理完成后我们可以拿到每个Promise的状态, 而不管其是否处理成功.

代码说明:

const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);
const successfulPromises = results.filter(p => p.status === 'fulfilled');
const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason).join(',');
if(errors){
  // 如果存在错误
  message.error(errors);
}

目前这个提案已经在stage-3阶段了, 相信很快可以与我们见面.