在前端开发中，经常涉及到并发请求的场景，例如同时请求多个接口，但常常遇到其中一个接口请求失败，其他请求也无法获取正确响应的情况。此时，我们需要一种方式来处理多个请求，确保能够获取所有请求的结果，而不会因为某个请求出错而影响其他请求的执行。
ES9 新增了 Promise.allSettled 方法，可以解决这个问题。本文将详细介绍 Promise.allSettled 的使用，包括语法、示例代码以及应用场景。
Promise.allSettled 的语法
Promise.allSettled 方法的语法如下：
Promise.allSettled(iterable);
其中，iterable 参数是一个可迭代对象，通常是一个数组，数组中包含了多个待处理的异步操作。该方法返回一个新的 Promise 对象，该 Promise 对象在所有异步操作执行完成后，会将所有操作的执行结果以一个数组的形式返回。
Promise.allSettled 的示例代码
下面是一个简单的例子，展示如何使用 Promise.allSettled 方法：
const promise1 = Promise.resolve('Hello');
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'world'));
const promise3 = Promise.reject(new Error('Promise error'));
Promise.allSettled([promise1, promise2, promise3])
.then((results) => console.log(results))
.catch((err) => console.error(err));在上面的代码中，我们定义了三个异步操作：
promise1在创建后立即返回一个成功结果'Hello'；promise2在 100ms 后返回一个拒绝结果'world'；promise3直接返回一个拒绝结果，错误信息为Promise error。
然后我们将这三个异步操作组合到一个数组中，传给 Promise.allSettled 方法进行处理。在所有异步操作完成后，会返回一个数组，包含三个对象，分别表示三次异步操作的执行结果，如下所示：
[
{ status: 'fulfilled', value: 'Hello' },
{ status: 'rejected', reason: 'world' },
{ status: 'rejected', reason: Error: Promise error at <anonymous>:6:30 }
]在这个数组中，每个对象都有两个属性：
status表示当前异步操作的执行状态，可能的取值为fulfilled（已成功）、rejected（已拒绝）；value或reason分别表示异步操作的执行结果。如果异步操作已成功，则value表示操作的返回值；如果异步操作已失败，则reason表示操作的拒绝原因。
Promise.allSettled 的应用场景
一般来说，Promise.allSettled 适用于以下几种场景：
多个请求同时执行
当需要同时发起多个请求并获取它们的返回结果时，可以使用 Promise.allSettled 方法。例如，同时获取多个接口的数据，可以使用如下代码：
const api1 = fetch('/api/data1');
const api2 = fetch('/api/data2');
const api3 = fetch('/api/data3');
Promise.allSettled([api1, api2, api3])
.then((results) => console.log(results))
.catch((err) => console.error(err));在这个例子中，我们使用了 fetch 方法异步获取三个接口的数据，并将它们组合成一个数组传给 Promise.allSettled 方法进行处理。
必须获取所有请求结果
当需要获取所有请求结果时，哪怕其中某些请求失败，也要保证其他请求的结果能够正常返回时，可以使用 Promise.allSettled。例如，为了提高页面加载速度，同时向多个第三方服务请求数据，并在所有请求都完成后，再渲染页面，可以使用如下代码：
-- -------------------- ---- -------
----- ------------------- - -------------------
----- ------------------- - -------------------
----- ------------------- - -------------------
---------------------------------------- -------------------- ---------------------
--------------- -- -
-- ----------------
----- ---------------- - ----------------- --- ----------- - ---------------- - -----
----- ---------------- - ----------------- --- ----------- - ---------------- - -----
----- ---------------- - ----------------- --- ----------- - ---------------- - -----
-- ----
------------------------------------ ----------------- ------------------
--
------------ -- --------------------在这个例子中，我们向三个第三方服务请求数据，不管请求是否成功，后续的渲染都必须执行，因此我们使用了 Promise.allSettled 方法，保证可以获取到所有请求结果，并在所有结果完成后进行页面渲染。
处理靠后的请求结果
当需要处理后续请求结果并进行特定逻辑处理时，可以使用 Promise.allSettled。例如，从接口 A 中获取数据，并根据数据特定的属性值做出相应的逻辑处理，同时从接口 B 中获取其他数据并进行处理，我们可以使用如下代码：
-- -------------------- ---- -------
----- --------------- - -------------------
----------- -- -----------
------------ -- -
-- ----- - --------
-- ------------------ --- ------------ -
-- -------------------------
-----------------------------
-
------ -----
---
----- --------------- - -------------------
----------- -- -----------
----------- -------------- -- -
-- ----- - --------
----- - --- ------ ----------- - - -------------
-- -------------
----- --------------------- - ----- ------------------- ------ -------------
------ ----------------------
---
------------------------------------ -----------------
--------------- -- ---------------------
------------ -- --------------------在这个例子中，我们向接口 A 和接口 B 分别发送请求，获取了不同的数据，并根据不同的业务需求进行不同的处理。使用 Promise.allSettled 可以保证逻辑处理逻辑按照预期执行，并可以拿到所有请求的结果。
总结
本文详细介绍了 Promise.allSettled 方法的语法、示例代码以及应用场景。通过 Promise.allSettled 方法，我们可以轻松地处理多个异步操作的执行结果，并保证能够获取所有请求的返回结果，从而提高前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cda00c1519ea946c16da7f