在前端开发中，我们常常需要同时发起多个请求，以提高页面的性能和用户体验。ES10 中的 Promise.allSettled() 方法可以帮助我们实现并行请求，提高代码的可读性和可维护性。
Promise.all() 方法和 Promise.allSettled() 方法的区别
在介绍 Promise.allSettled() 方法之前，我们先来了解一下 Promise.all() 方法。
Promise.all() 方法用于将多个 Promise 实例包装成一个新的 Promise 实例，当所有的 Promise 实例都成功时，返回的 Promise 实例才会成功；当其中任意一个 Promise 实例失败时，返回的 Promise 实例就会失败。
----- -------- - ------------------------- ----- -------- - ------------------------- ----- -------- - ------------------ ---------------- ---------------------- ---------- ------------ -- -------------------- -- --------- -------- ------------ -- ---------------------- ---------------------- ---------- ------------ -- -------------------- ------------ -- ---------------------- -- ------ -----
Promise.allSettled() 方法也用于将多个 Promise 实例包装成一个新的 Promise 实例，不同的是，返回的 Promise 实例不会失败，而是会等待所有的 Promise 实例都 settled（即 fulfilled 或 rejected）后返回一个包含所有 Promise 实例状态的数组。
----- -------- - ------------------------- ----- -------- - ------------------------- ----- -------- - ------------------ ---------------- ----------------------------- --------- ---------- ------------- -- --------------------- ------------ -- ---------------------- -- - -- - ------- ------------ ------ ------- -- -- - ------- ------------ ------ ------- -- -- - ------- ----------- ------- ------ ----- - -- -
实现并行请求
使用 Promise.allSettled() 方法可以方便地实现并行请求，下面是一个简单的示例：
----- ---- - ------------------------------------------------ ----------------------------------------------- -----------------------------------------------
------------------------------- -- ------------
------------- -- -
---------------------- -- -
-- -------------- --- ------------ -
---------------------------------
- ---- -
-----------------------------
-
---
--
------------ -- ----------------------在这个示例中，我们首先定义了一个包含多个 URL 的数组，然后使用 map() 方法将每个 URL 转换成一个 fetch() 请求，并将所有请求的 Promise 实例传递给 Promise.allSettled() 方法。最后，我们可以遍历返回的结果数组，根据每个 Promise 实例的状态来处理响应数据或错误信息。
总结
使用 ES10 中的 Promise.allSettled() 方法可以方便地实现并行请求，提高代码的可读性和可维护性。我们可以将多个 Promise 实例传递给 Promise.allSettled() 方法，等待所有实例都 settled 后处理返回的结果数组。这个方法在实际开发中非常常用，建议掌握并灵活运用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658be39aeb4cecbf2d12ea00