Promise.all中的错误处理

ID: 符合预期的CoyPan
CoyPan，BAT某厂符合预期的FE，正努力成为一名出色的工程师

写在前面

当我们想“并发执行”若干个任务的时候，我们很容易就想到了Promise.all。但是Promise.all有一个缺陷：当有一个任务失败的时候，就会直接进入catch的逻辑了。这个可能并不是我们想要的结果。想象一下我们同时发出了3个网络请求，其中2个正常返回了，有一个reject了，结果却都挂了，只能被迫进入错误处理的逻辑。我们的需求是：出错的那一个请求不会影响到正常的请求。这种情况应该怎么处理呢？

使用await，增加try…catch…逻辑

要解决上面的问题，思路很简单，只需要再外面再包一层Promise就行了，不管内部的Promise是resolved或者rejected了，外层的Promise都resolve就可以了。这样，Promise.all接收到的，永远都是resolved的Promise。两层的Promise看起来有些别扭，为了代码写起来稍微好看一点，我们用await和try..catch来处理。

/**
 * @param {Promise} p 
 */
async function promiseWithError(p) {
  try {
    const res = await p;
    return {
      err: 0,
      data: res
    };
  } catch(e) {
    return {
      err: 1
    }
  }
}

下面，通过示例代码来看一下。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise resolve 1');
  }, 1000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise resolve 2');
  }, 2000);
});

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('promise reject 3');
  }, 3000);
});

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

// 最终输出为： promise reject 3

我们修改一下代码：

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

// 最终的输出为：
// resolve: [{ err: 0, data: "promise resolve 1"}, { err: 0, data:"promise resolve 2"}, { err: 1 }]

我们用promiseWithError把原本的promise包了一层。async可以把任何函数都转换为Promise，最终传入Promise.all的依然是一个Promise数组，没有问题。

这样，我们就解决了问题：Promise.all不会因为其中某一个Promsie被reject而导致整个挂掉。

Promise.allSettled

要解决文章开头提到的问题，我们还可以使用Promise.allSettled。

Promise.allSettled()方法返回一个在所有给定的promise已被resolve或被reject后的promise，并带有一个对象数组，每个对象表示对应的promise结果。依然使用上面的例子：

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

// 最终输出为：
// resolve: [{ status: "fulfilled", value: "promise resolve 1" }, { status: "fulfilled", value: "promise resolve 2"}, { status: "rejected", reason: "promise reject 3"} ]

目前，Promise.allSettled处于 tc39 stage-4 阶段，马上就会正式发布了。

写在后面

本文阐述了两种处理Promise.all中错误的方法，对日常开发是很有用处的。关于JavaScript中的异步任务相关总结，可以查看我之前的文章：

https://www.imooc.com/article/297825

https://www.imooc.com/article/303152