随着 JavaScript 语言的不断发展，前端领域的代码也变得越来越复杂。为了保证代码的可维护性和可读性，我们采用了 ES6 中的 async/await 来优化异步编程。但是在实际开发中，我们会经常遇到一些异步操作失败的情况，这时候我们需要处理这些异常情况，避免代码崩溃。而在处理多个异步操作时，使用 Promise.all 可能会抛出异常，导致代码出错。因此，在 ES11 中，Promise.allSettled 作为 Promise.all 的一个替代方法，提供了更好的错误处理方式。
Promise.all 和 Promise.allSettled 的区别
在了解 Promise.allSettled 的处理方式之前，我们需要先了解一下 Promise.all 和 Promise.allSettled 的区别。使用 Promise.all 时，如果其中任何一个 Promise 被 reject，则整个 Promise.all 被 reject，这可能导致整个应用程序的崩溃。而使用 Promise.allSettled，则会始终返回结果，即使其中几个 Promise 失败，也不会使整个 Promise.allSettled 抛出异常。
使用 Promise.allSettled 处理 async/await 异常
在实际开发中，我们经常会遇到需要同时处理多个异步操作的情况。比如我们需要获取多个接口的数据，然后在处理完毕后将数据渲染到界面上。以下就是一个使用 Promise.all 处理异步操作的示例代码：
-- -------------------- ---- -------
----- --------- - ----- -- -- -
--- -
----- ------- ------ - ----- -------------
---------------------------- -- ------------
---------------------------- -- ------------
--
-- -- --------- ---- ----
- ----- ------- -
-------------------- ---- ------ -- -------
-
-上面的代码使用了 ES6 中的 async/await 和 Promise.all，如果其中一个 Promise 被 reject 就会抛出异常。在这种情况下，我们可以使用 Promise.allSettled 来处理异常：
-- -------------------- ---- -------
----- --------- - ----- -- -- -
--- -
----- ------- ------ - ----- --------------------
---------------------------- -- ------------
---------------------------- -- ------------
--
----- --------------- -------------- - ------- ----------------------- -- -
---------------- --- ------------ -
------ -------------
- ---- -
-------------------- -------------------- ------ -- ---------------
------ ---
-
---
-- -- --------- ---- ----
- ----- ------- -
-------------------- ---- ------ -- -------
-
-上面的代码使用了 async/await 和 Promise.allSettled，即使有 Promise 被 reject，代码仍会继续执行。我们使用了 flatMap 来处理 Promise.allSettled 的结果，将 resolved 和 rejected 的结果分别处理。对于 rejected 的 Promise，我们可以在 console 中输出错误信息。这样我们就可以在多个异步操作中灵活地处理错误，并避免 Promise.all 所带来的代码异常问题。
总结
在使用 async/await 处理异步操作时，我们需要注意代码的错误处理，避免 Promise.all 带来的异常问题。在 ES11 中，我们可以使用 Promise.allSettled 更安全地处理多个异步操作，并在发生错误时提供更好的错误提示。在实际开发中，我们应该灵活选择 Promise.all 和 Promise.allSettled，并根据具体情况选择合适的处理方式，为保证代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b8ad8fadd4f0e0ff141c24