在前端开发中，异步变化的状态是很常见的。例如，当我们向后端发起 AJAX 请求时，需要将请求的结果显示在 UI 上。这个过程中，我们通常会遇到一些问题，例如异步回调嵌套过深、错误处理不当等等。
为了解决这些问题，ES12 引入了一些新的语法和 API，使得我们在管理异步状态时更加方便和高效。接下来，我们将具体介绍一下这些内容。
Promise.allSettled()
在实际开发中，我们有时需要同时发起多个异步请求，并在所有请求结束后统一处理它们的结果。ES6 引入的 Promise.all() 可以帮助我们实现这个功能，但它只有在所有请求都成功时才返回结果，一旦有一个失败就会直接抛出异常。
ES12 引入了新的 API Promise.allSettled()，允许我们在所有异步请求完成后统一处理结果，即使其中某个请求失败了也不会导致整个程序崩溃。代码示例如下：
-- -------------------- ---- -------
----- -------- - -
--------------------
--------------------
----------------------
-
----------------------------
------------- -- -
---------------------- -- -
-- -------------- --- ------------ -
-------------------------
- ---- -
--------------------------
-
--
--我们可以看到，Promise.allSettled() 的返回值是一个数组，数组中的每个元素都包含了一个状态和相应的值或原因。我们可以根据状态来判断该值是否成功。
Promise.any()
Promise.any() 与 Promise.all() 和 Promise.race() 有些类似，但是它的功能更为强大。Promise.any() 会一直等待，直到有一个 Promise 状态变成了 'fulfilled' 状态，然后返回该 Promise 的值，无论其它 Promise 是否已经完成。
代码示例：
-- -------------------- ---- -------
----- -------- - -
--------------------
--------------------
----------------------
-
---------------------
------------ -- -
-------------------
--这里的 Promise 返回值表示最快完成的异步操作的结果。
try/catch/finally 中的异步代码
在 ES6 中，我们可以使用 async/await 关键字来方便地管理异步状态。但是在 try/catch/finally 语句中，异步代码的异常处理可能会出现问题。因为 try/catch/finally 中的代码是同步执行的，而异步代码的异常在触发时会跳出当前的调用栈，无法被 try/catch/finally 捕获。
ES12 解决了这个问题，允许我们在 try/catch/finally 代码块中使用异步代码，并对其异常进行捕获和处理。
代码示例：
-- -------------------- ---- ------- --- - ----- -------- - ----- ------------------- ----- ---- - ----- --------------- ----------------- - ----- ------- - -------------------- - ------- - ------------------ ----- -
总结
ES12 引入的 Promise.allSettled()、Promise.any() 和 async/await 在 try/catch/finally 中的使用，极大地简化了异步编程中状态管理的复杂度，并提高了开发的效率。我们可以充分地利用这些新特性来提升开发效率、简化代码，从而更加高效地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e41c7df6b2d6eab3f77f66