异步请求在前端开发中是非常常见的。在实际开发过程中，我们常常会遇到需要同时发送多个异步请求的场景。而 Promise.all() 方法能够帮我们解决这个问题，但是它有一个缺点，当其中一个请求失败时，整个 Promise.all() 方法就会失败。这时候，ES8 中新增的 Promise.allSettled() 方法就可以帮我们解决这个问题。
Promise.all() 方法的缺点
在介绍 Promise.allSettled() 方法之前，我们先来看一下使用 Promise.all() 方法时遇到的问题。
假设我们需要获取多个用户信息，并同时发送多个请求。我们可以使用 Promise.all() 方法来实现：
-- -------------------- ---- ------- ----- ----------- - ----- -------- -- - ----- --- - ----- -------------------------------------------- ----- ---- - ----- ----------- ------ ----- - ----- ------- - --- -- --- ---------------------------------------------------- -- - --------------------- ---------------- -- - --------------------- ---
上面的代码中，我们将用户的 id 存储在一个数组中，然后使用 Array.prototype.map() 方法将每个用户的 id 传给 getUserInfo() 函数，生成一个返回 Promise 的数组。最后，我们将这个数组作为 Promise.all() 方法的参数，等待所有 Promise 全部成功之后返回。
但是，如果其中一个请求失败了，它就会触发 Promise.all() 方法的 catch() 方法。这意味着，我们将失去其他请求的响应数据。这是我们不想看到的情况。
Promise.allSettled() 方法的介绍
可以看出，Promise.all() 方法的一个重要限制是当我们发送的多个异步请求中有一个失败的时候，整个方法就会失效，导致我们无法得到其它请求成功的结果。而 Promise.allSettled() 方法则能够解决这个问题。
Promise.allSettled() 方法接收一个 Promise 数组为参数，并返回一个 Promise 。当参数 Promise 数组全部完成后，它将返回一个对象数组。当 Promise.allSettled() 方法返回的 Promise 成功时，对象数组的每个元素都被解析为一个对象，该对象描述了对应的 Promise 是否被成功地解决（由 status 字段指示），并提供了一个可选的 Promise 结果值或 Promise 拒绝原因。
下面是 Promise.allSettled() 方法的用法示例：
const promises = Promise.allSettled([
Promise.resolve("Resolved Promise"),
Promise.reject("Rejected Promise")
]);
promises.then((results) => {
console.log(results);
});Promise.allSettled() 方法返回的结果是一个对象数组，每个对象都包含以下属性：
- status：表示 Promise 的状态，有两个可能的值：fulfilled 和 rejected。
- value（可选）：表示 Promise 的值，当 Promise 被成功地解决时该值存在，此时 status 为 fulfilled ; 当 Promise 被拒绝时该值不存在，此时 status 为 rejected 。
- reason（可选）：表示 Promise 拒绝的原因，当 Promise 被拒绝时该值存在，此时 status 为 rejected ; 当 Promise 被成功地解决时该值不存在，此时 status 为 fulfilled 。
现在，我们可以将它应用于我们之前遇到的问题并发起多个请求，而不用担心请求失败原因。
Promise.allSettled() 方法解决多个异步请求问题
Promise.allSettled() 方法的用法示例如下：
-- -------------------- ---- ------- ----- ----------- - ----- -------- -- - ----- --- - ----- -------------------------------------------- ----- ---- - ----- ----------- ------ ----- - ----- ------- - --- -- --- ----------------------------------------------------------- -- - --------------------- ---
这里，我们使用 map() 方法将我们的 getUserInfo() 函数应用于 userIds 数组中的每个元素。subtractByOne() 函数返回一个 Promise。最后，我们将生成的 Promise 数组传递给 Promise.allSettled() 函数。和 Promise.all() 方法相同，其返回结果也是一个 Promise 对象。
当我们成功地解决或拒绝所有请求时，会返回一个对象数组。我们可以检测状态和值属性以确定是否成功完成请求。
console.log(results) 的输出结果如下所示：
-- -------------------- ---- -------
-
-
------- ------------
------ - --- - -
--
-
------- ------------
------ - --- - -
--
-
------- -----------
------- ----------- ------ -- ------
-
-结论
通过使用 Promise.allSettled() 方法，我们能够在多个异步请求时，无论哪个请求失败我们都可以得到其他请求成功的响应数据，避免了丢失这些数据的情况。在实际开发中，这种方法可以大大提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719d0719b4aadf9e00597ec