在我们编写前端应用程序时,经常需要进行异步操作。在某些情况下,我们需要等待多个异步操作完成后再执行下一步操作。在这种情况下,我们需要使用解决异步并发的技术。
以前,我们使用 Promise.all 方法处理异步并发。这个方法会返回一个 Promise 对象,该对象会在所有 Promise 对象都解决后解决。这是一个非常有用的技术,但是它有一个重要的限制,如果其中一个 Promise 对象拒绝了,整个 Promise.all 方法也会拒绝。
ES12 中引入了一个新方法 Promise.allSettled,该方法在所有 Promise 结束后都会执行,并返回每个 Promise 的状态。这个新方法改变了异步并发处理的方法,并且使得处理并发异步操作更加简单。
Promise.allSettled 方法的定义
使用 Promise.allSettled 方法,可以跟踪一组 Promise 对象集合的状态并等待这些 Promise 对象全部结束后再执行下一步操作。该方法接收一个 Promise 数组,返回结果通常是一个由所有 Promise 状态对象和结果组成的数组。这个数组中的每个项目都包含来自 Promise 的一个或多个状态。
下面是 Promise.allSettled 方法的语法:
Promise.allSettled(iterable)
其中,iterable
表示一个元素对象,通常是一个数组或可迭代对象。它包含一组要解析的 Promise 对象。
Promise.allSettled 方法的应用
假设我们有以下三个异步操作:
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------- -- - ----------------- ------ -- ------ --- ----- -------- - --- ----------------- ------- -- - ------------- -- - ----------------- ------ -- ------ --- ----- -------- - --- ----------------- ------- -- - ------------- -- - ---------------- ------ -- ------ ---
我们需要等待所有异步操作完成后,才能继续执行下一步操作,同时,我们需要检查每个 Promise 的状态。在这种情况下,我们可以使用 Promise.allSettled 方法,如下所示:
Promise.allSettled([promise1, promise2, promise3]) .then((results) => { console.log(results); }) .catch((error) => { console.log(error); });
执行这个代码片段,结果如下:
[ {status: "fulfilled", value: "Promise1 完成了"}, {status: "fulfilled", value: "Promise2 完成了"}, {status: "rejected", reason: "Promise3 拒绝了"} ]
上面的结果数组包含三个元素,每个元素表示一个 Promise 对象的状态和结果。因为 Promise 3 被拒绝了,理所当然,结果数组中的第三个元素是拒绝状态。
可以看到,Promise.allSettled 方法确实可以解决 Promise.all 方法的限制,并且提供了更多关于每个 Promise 对象状态和结果的信息。
总结
Promise.allSettled 方法提供了一种更灵活的方式来处理异步并发操作,而不是使用 Promise.all 方法。它返回一个数组,包含每个 Promise 的状态和结果。
了解 Promise.allSettled 的实现是很有益处的,可以使您更加灵活地处理异步并发操作。在下一次开发中,您可以考虑使用 Promise.allSettled 方法来更好地掌握 Promise 的功能。
示例代码
下面的代码中,我们使用 Promise.allSettled 方法来查询 GitHub REST API 中的三个不同的端点:Users、Repos 和 Events。每个查询都是通过 Fetch API 发送的异步请求,Promise.allSettled 方法被用来等待所有请求解决或拒绝。每个请求的响应和错误信息都包含在返回的数组中。
-- -------------------- ---- ------- ----- -------- - -------------------------------------- ----- -------- - --------------------------------------------- ----- --------- - --------------------------------------- ----------------------------- --------- ----------- --------------- -- - ------------------------ ------ -- - -- -------------- --- ------------ - ------------------ ------- - -- ------------ -------------- - ---- - ------------------ ------- - -- --------- --------------- - --- -- -------------- -- - --------------- ----- ----------- ------- ---
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65011cd695b1f8cacdeed346