前端开发中经常会遇到异步请求的情况，例如调用 API 获取数据。但是，有时这些异步请求可能会出现异常，导致页面无法正确渲染，或者建立依赖关系时数据不完整。而 Promise.allSettled 则是一种可以解决这个问题的方法。
Promise.allSettled 的作用
Promise.allSettled 是 JavaScript 中的一个原生方法，它接收一个由 Promise 对象组成的数组，并返回一个新的 promise 对象。当所有的 Promise 都已经fulfilled 或 rejected 时，这个新的 promise 将会 fulfilled ，返回一个包含所有 Promise 结果状态（fulfilled 或 rejected）的数组。
与 Promise.all 不同的是，Promise.all 如果其中任意一个 Promise 被 rejected，则整个 Promise.all 调用也会被 reject。而 Promise.allSettled 不会因为其中一个 Promise 被 reject 而 reject 整个数组。
在前端开发过程中，异步请求数据的稳定性是经常会面对的问题。大多数情况下，我们会使用 Promise 来处理异步操作。比如，以下代码展示了如何使用 Promise 来发送异步请求并获取数据：
----- -------- - -
-----------------
-----------------
--
---------------------
----------------- -- -
-- ------ ---------
--
-------------- -- -
-- ------ -----
---在上面的例子中，我们使用了 Promise.all() 来等待所有异步请求完成，并返回结果。但是，如果其中一个请求出错，整个操作会被拒绝（rejected），导致整个页面无法渲染。
这时候，我们可以使用 Promise.allSettled 来改善这个情况，代码如下：
----- -------- - -
-----------------
-----------------
--
----------------------------
--------------- -- -
----- ---------------- - ----------------------- -- ------------- --- ------------
------------- -- --------------
-- ------------------------ --- ---------------- -
-- ------ --------- -------
- ---- -
------------------- -------- ---- ---------
-
---上述代码中，我们首先调用了 Promise.allSettled 方法，并把所有 Promise 对象传入到一个数组里。然后，在 then() 方法中，我们使用 filter 函数来从结果数组中筛选出已经“fulfilled”的 Promise，并将结果存储在 fulfilledResults 数组中。
接下来判断 fulfilledResults 数组长度是否与 Promise 数组一致。如果是，则所有 Promise 都已经“fulfilled”；如果不是，则有 Promise 被 rejected 或还没有“settled”。此时，我们应该对结果进行处理或者提醒用户请求失败。
结论
Promise.allSettled 是解决异步请求数据稳定性问题的有效方法之一。 与 Promise.all 不同的是，Promise.allSettled 不会因为其中一个 Promise 被 reject 而导致整个 Promise 调用失败，这可以更好的保证数据完整性和稳定性。
在开发过程中，我们应该考虑到异步请求失败的情况，并使用 Promise.allSettled 进行处理，以便更好地维护用户体验和代码质量。
示例代码
----- -------- - -
-----------------
-----------------
--
----------------------------
--------------- -- -
----- ---------------- - ----------------------- -- ------------- --- ------------
------------- -- --------------
-- ------------------------ --- ---------------- -
-- ------ --------- -------
- ---- -
------------------- -------- ---- ---------
-
---*注意：示例中省略了一些错误处理
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672d7c69eedcc8a97c851525