在 Web 前端开发中，异步编程是非常常见的问题。随着 JavaScript 语言的不断发展和更新，新的异步编程方式和工具层出不穷，其中就包括了 ES10 中新增的 Promise.allSettled() 方法。本文将向您介绍这个新方法的具体用法和优势，并提供相关示例代码帮助您更好地理解和应用这一技术。
Promise.allSettled() 方法简介
Promise.allSettled() 方法是 ES10 中新增的一个静态方法，它的作用是在多个 Promise 对象执行完毕后返回所有 Promise 对象的执行结果，不论成功或失败。返回一个新的 Promise 对象，其状态在所有 Promise 对象执行完成后改变。
该方法接收一个可迭代的值作为参数，例如一个数组，其中每个元素都是一个 Promise 对象。当所有 Promise 对象都执行完毕后，返回一个新的 Promise 对象，该对象的状态为已解决，其值是一个包含所有 Promise 对象执行结果的数组，其中每个数组元素是一个对象，包含以下两个属性：
- status 表示 Promise 对象的执行状态，可以是 resolved、rejected 或者 pending。
- value 表示 Promise 对象执行的结果，当 status 为 resolved 时，该属性为 Promise 对象执行的值，当 status 为 rejected 时，该属性为 Promise 对象执行时发生的错误对象。
Promise.allSettled() 方法的优势
使用 Promise.allSettled() 方法有以下几个优势：
返回所有 Promise 对象的执行结果，即使其中某个 Promise 对象执行失败，该方法也不会终止整个异步任务的执行。
可以更加方便地对多个异步任务的结果进行处理，而不需要通过多层嵌套的回调函数来完成。
在某些情况下，使用 Promise.allSettled() 方法可以更好地控制异步任务的执行顺序，避免出现不可预料的错误。
Promise.allSettled() 方法的示例代码
下面是一个简单的示例代码，通过使用 Promise.allSettled() 方法来获取多个异步任务的执行结果：
-- -------------------- ---- -------
----- -------- - -
-------------------------
------------------ ----------------
---------------------------
--
----------------------------
--------------- -- -
---------------------
--
-------------- -- -
---------------------
---以上代码中，我们创建了一个包含三个 Promise 对象的数组，分别代表了三个异步任务。第一个和第三个 Promise 对象都执行成功，并返回了一个字符串参数，而第二个 Promise 对象执行失败，并返回了一个错误对象。
通过调用 Promise.allSettled(promises) 方法，我们将所有 Promise 对象作为参数传入，并将返回的 Promise 对象赋值给一个变量 results。当所有 Promise 对象都执行完毕后，then() 方法将会被执行，我们可以通过打印 results 参数来查看所有 Promise 对象的执行结果。
最后，如果 Promise.allSettled(promises) 方法中发生了错误，catch() 方法将会被执行，并返回错误信息。
Promise.allSettled() 方法的进阶应用
除了简单的使用示例之外，我们还可以将 Promise.allSettled() 方法结合其他异步编程方式，进一步优化我们的异步任务处理流程。
例如，在某些情况下，我们需要等待多个异步任务全部执行完毕后再执行下一步操作，这时可以使用 async/await 和 Promise.allSettled() 方法结合的方式进行优化，如下所示：
-- -------------------- ---- -------
----- -------- ------------------------ -
----- -------- - -------------- -- -------
----- ------- - ----- ----------------------------
----- --------------- - --------------------- -- ------------- --- ----------------------- -- -------------
----- ----------- - --------------------- -- ------------- --- ---------------------- -- --------------
----------------------- ----------------
----------------------- ------------
-
----- ---------- - -
----- ---------- -
------ ----- ------------------- - ------
--
----- ---------- -
----- --- --------- - ------
--
----- ---------- -
------ ----- ------------------- - ------
-
-
-----------------------------以上代码中，我们首先定义了一个 executeAsyncTasks() 函数，该函数接受一个包含多个异步任务的数组作为输入参数。在该函数中，我们首先通过 map() 方法将任务数组转换为 Promise 对象数组，并将其赋值给 promises 变量。
然后，我们使用 await 关键字等待 Promise.allSettled(promises) 方法的执行结果，并将其赋值给一个 results 变量。通过对 results 数组的过滤和 map() 操作，我们可以得到执行成功和执行失败两组任务，并将它们分别打印输出。
最后，我们定义了一个包含三个异步任务的 asyncTasks 数组，并将它作为输入参数传递给 executeAsyncTasks() 函数。通过执行该函数，我们可以看到所有任务的执行结果。
总结
在本文中，我们详细介绍了 ES10 中新增的 Promise.allSettled() 方法，并提供了相关示例代码帮助您更好地理解和应用这一技术。通过使用 Promise.allSettled() 方法，我们可以更加方便地处理多个异步任务的结果，并避免出现不可预料的错误。在异步编程中，这是一种非常实用而很常用的技术方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498f43c48841e98945e2d87