使用 ES8 实现 Promise.allSettled
在前端开发中，经常需要并发请求多个接口，此时我们可以使用 Promise.all 方法。但是，当其中某个接口请求失败时，所有接口请求都会被中断，这就会导致我们难以了解其它接口的执行情况，对于调试和异常处理都会带来麻烦。
幸运的是，ES8 实现了 Promise.allSettled 方法，它可以在所有接口请求完成后，返回一个数组，包含所有接口的结果，成功或者失败都会返回。本篇文章就来详细介绍使用 ES8 实现 Promise.allSettled 方法的方式以及使用场景。
实现 Promise.all 方法
在 ES6 中，新增了 Promise.all 方法，可以方便地并发请求多个异步任务，并在所有任务完成后，进行后续的数据处理操作。以下是使用 Promise.all 方法的示例代码：
-- -------------------- ---- ------- ----- ---------- - --- ----------------- -- - ------------- -- --------------- ------ --- ----- ---------- - --- ----------------- -- - ------------- -- --------------- ------ --- ------------------------ -------------------------- -- - -------------------- -- -- ------- ------ -- ----- -- - ----------------- -- -- ------ ---- ---
可以看到，Promise.all 方法可以对多个 Promise 对象进行并发处理，并在所有 Promise 对象请求完成后，返回一个包含所有 Promise 对象结果的数组。但是当其中某个 Promise 对象请求失败时，整个请求过程就会失败，并不会返回其它对象请求成功的结果。
问题解决：使用 Promise.allSettled 方法
为了解决 Promise.all 方法的问题，ES8 提供了全新的 Promise.allSettled 方法，它允许我们在所有异步任务执行完成之后，返回一个数组，包含每个异步任务的完成结果。
以下是使用 Promise.allSettled 方法的示例代码：
-- -------------------- ---- ------- ----- ---------- - --- ----------------- -- - ------------- -- --------------- ------ --- ----- ---------- - --- ----------------- ------- -- - ------------- -- -------------- ------ --- ------------------------------- -------------------------- -- - -------------------- -- -- - -- - ------- ------------ ------ ----- -- -- - ------- ----------- ------- ----- - -- - -- ----- -- - ----------------- -- -- ------ ---- ---
与 Promise.all 方法不同的是，在 Promise.allSettled 方法执行过程中，即使其中某个 Promise 对象请求失败，其余对象仍然会继续处理，并将其状态（fulfilled 或者 rejected）和结果（value 或者 reason）追加到返回的数组中。
使用场景
在实际的开发中，我们通常会使用 Promise.all 方法进行并发请求。但是当其中一个请求失败时，整个请求过程就会失败，并让我们难以了解其余请求的执行情况。这时，Promise.allSettled 方法就派上用场了。
使用 Promise.allSettled 方法可以获取所有请求的执行结果，无论是成功还是失败，都可以得到反馈信息。这在日志记录和异常处理中十分有用，可以让我们更加清晰地了解程序的执行情况。
示例代码
以下是一个使用 Promise.allSettled 实现异步请求并根据返回结果进行相应处理的示例代码：
-- -------------------- ---- -------
----- ---------- - -- -- -
----- ------------- - ---------------------------------------------
------ --------------------
-------------- -- -----------------
--
----- ---------- - -- -- -
----- ------------- - ---------------------------------------------
------ --------------------
-------------- -- -----------------
--
--------------------------------- ----------------------------- -- -
----- ------- ------ - --------
-- ------------- --- ------------ -
---------------------- -------------
- ---- -
----------------------
-
-- ------------- --- ------------ -
---------------------- -------------
- ---- -
----------------------
-
---可以看到，在以上代码示例中，使用了 Promise.allSettled 方法，获取了两个异步请求的执行状态。并可以根据返回结果进行相应的处理，无论是成功还是失败，都会得到反馈信息。
总结
通过本篇文章的介绍，我们了解了 ES8 提供的 Promise.allSettled 方法，以及其与 Promise.all 方法的区别。使用 Promise.allSettled 方法可以获取所有异步请求的执行结果，无论是成功还是失败，都可以得到反馈信息，适用于复杂的异步请求场景。在实际项目开发中，可以根据具体情况选择合适的方法，用于处理并发请求的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646adb02968c7c53b0a53c11