随着单页应用的普及，前端开发越来越需要使用异步编程来处理复杂的逻辑。而 Promise.all() 已经成为了处理多个异步操作的常用方式。但是常常会出现一些异步请求因为网络原因或者其他原因而失败，需要进行补救措施。这时候就需要使用 Promise.allSettled() 这个新 API 来处理这些情况。
Promise.all() 存在的问题
我们先来简单介绍一下 Promise.all() 的使用方法。Promise.all() 接收一个包含多个 Promise 对象的数组，返回一个新的 Promise 对象。当这个数组中的所有 Promise 都成功 resolve 的时候，新的 Promise 对象才会 resolve。否则，只要其中有一个 Promise reject，新的 Promise 对象就会 reject。例如：
----- -------- - --- ----------------- ------- -- -
------------- -- -
-----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
-----------
-- ------
---
---------------------- ----------
-------------- -- -
--------------------
--
-------------- -- -
-------------------
---上面的代码会在 2s 后输出 [1, 2]。但是如果 promise2 reject 了，我们的代码就会进入 catch 分支，因为 Promise.all() 会把所有 Promise 的错误信息一股脑地抛出来。这就让我们无法区分是哪个 Promise 出了问题，并且如果 Promise 数组中的 Promise 数量很多，你还需要写很多代码来区分是哪个 Promise 出了问题。
这个时候，Promise.allSettled() 就会显得尤为重要。
Promise.allSettled() 的使用
Promise.allSettled() 的使用方式和 Promise.all() 类似，同样需要一个包含多个 Promise 对象的数组，并且也返回一个新的 Promise 对象。不过，Promise.allSettled() 返回的 Promise 对象永远都是 resolved，不管数组中的 Promise 成功还是失败。Promise.allSettled() 返回的是一个数组，数组的每个元素都是表示对应 Promise 的状态。
下面看一个简单的示例：
----- -------- - --- ----------------- ------- -- -
------------- -- -
-----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------- -------------- ---------
-- ------
---
----------------------------- ----------
--------------- -- -
---------------------
--
-------------- -- -
---------------------------
---这个代码会在 2s 后输出一个数组，并且数组的两个元素的值分别为：
- - ------- ------------ ------ - -- - ------- ----------- ------- ------ ------- ----- -- ------------------- - -
可以看到，Promise.allSettled() 把 Promise 的状态保存在了 value 和 reason 字段中，同时也能够避免 Promise.all() 中 Promise 失败抛出异常的问题。
Promise.allSettled() 在单页应用中的应用
在单页应用中，常常会需要同时发送多个 Ajax 请求，并在所有请求都完成后执行一些逻辑。例如：
------------- ---------------- ---------------- ---------------- ------------------- -- - -- ------- ----------------------- ---
但是如果其中某个请求失败了怎么办呢？如果使用 Promise.all()，那么就会出现上一节中提到的有错误则全部 reject 的问题。这时候，就需要使用 Promise.allSettled()，并对每个 Promise 的执行结果进行判断。例如：
------------------------------------ ---------------- -----------------
--------------- -- -
-- -------
---------------------
----- --------- - ---
----- ------ - ---
------------------------ -- -
-- -------------- --- ------------ -
-----------------------------
- ---- -
---------------------------
-
---
-- -------------- --- -- -
-- -------
-----------------------
- ---- -
-- ------
--------------------
-
--
-------------- -- -
---------------------------
---上述代码就能够实现在执行多个 Ajax 请求后，当所有请求都完成后检查是否有请求异常，并一一处理异常结果。
总结
如果你是一个前端开发者，那么 Promise.all() 和 Promise.allSettled() 一定是你日常工作中必不可少的工具之一。在单页应用中，我们常常会使用 Promise.all() 来处理多个异步请求。但是 Promise.all() 无法准确处理请求异常的问题，这时候，Promise.allSettled() 就能够派上用场。在了解了 Promise.allSettled() 的使用方法后，相信你已经能够快速上手使用它了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ac20c648841e9894824aba