在前端开发中，我们经常需要使用 fetch API 来进行数据的请求和处理。而在异步编程中，我们通常使用 async/await 来简化异步代码的编写。但是，当我们需要同时发起多个 fetch 请求时，如何处理和管理这些请求的返回结果呢？
在这篇文章中，我们将介绍如何使用 Promise.allSettled() 和 ECMAScript 2017 (ES8) 来处理 Async/Await 多个 fetch in 进程的问题，并提供详细的示例代码和指导意义。
Promise.allSettled()
在介绍如何处理 Async/Await 多个 fetch in 进程的问题之前，我们先来了解一下 Promise.allSettled()。
Promise.allSettled() 是 ECMAScript 2019 (ES10) 中新增的一个 API，它接收一个 Promise 数组作为参数，并返回一个新的 Promise，该 Promise 在所有输入的 Promise 都已经 settled (fulfilled 或 rejected) 后才会 resolve。
Promise.allSettled() 的返回值是一个数组，数组的每个元素都是一个对象，该对象表示对应的 Promise 的状态。对象包含以下两个属性：
- status：表示 Promise 的状态，可能的值为 "fulfilled" 或 "rejected"。
- value 或 reason：表示 Promise 的返回值或拒绝原因。
使用 Promise.allSettled() 可以方便地处理多个异步操作的返回结果，而不需要关心它们的执行顺序和状态。
处理 Async/Await 多个 fetch in 进程的问题
现在我们来看一下如何使用 Promise.allSettled() 和 ECMAScript 2017 (ES8) 来处理 Async/Await 多个 fetch in 进程的问题。
假设我们需要同时请求多个数据接口，并在所有请求都完成后对它们进行处理。我们可以使用 Promise.all() 来等待所有 Promise 都完成后再进行处理，如下所示：
----- -------- ----------- -
----- ------- ------ ------ - ----- -------------
---------------------------- -- ------------
---------------------------- -- ------------
---------------------------- -- -----------
---
------------------ ------ -------
-这样做的问题在于，如果其中一个 Promise 被拒绝 (rejected)，那么整个 Promise.all() 将被拒绝，并且我们无法知道哪个 Promise 被拒绝了。为了解决这个问题，我们可以使用 Promise.allSettled() 来等待所有 Promise 都 settled 后再进行处理，如下所示：
----- -------- ----------- -
----- ------ ----- ----- - ----- --------------------
---------------------------- -- ------------
---------------------------- -- ------------
---------------------------- -- -----------
---
----- ----- - ----------- --- ----------- - ---------- - -----
----- ----- - ----------- --- ----------- - ---------- - -----
----- ----- - ----------- --- ----------- - ---------- - -----
------------------ ------ -------
-这样做的好处在于，即使其中一个 Promise 被拒绝，我们也可以得到所有 Promise 的返回结果，并且可以根据每个 Promise 的状态来进行处理。
另外，我们也可以使用 for...of 循环来处理多个 fetch 请求的返回结果，如下所示：
----- -------- ----------- -
----- ---- - -------------- ------------- --------------
----- ------- - ---
--- ------ --- -- ----- -
----- ------ - ----- ----------
--------- -- -----------
------------ -- -
---------------------
------ -----
---
---------------------
-
---------------------
-这种方式虽然比较简单，但是它是串行执行的，无法并行处理多个请求，因此不适用于大量请求的情况。
总结
在本文中，我们介绍了如何使用 Promise.allSettled() 和 ECMAScript 2017 (ES8) 来处理 Async/Await 多个 fetch in 进程的问题。使用 Promise.allSettled() 可以方便地处理多个异步操作的返回结果，而不需要关心它们的执行顺序和状态。另外，我们也可以使用 for...of 循环来处理多个 fetch 请求的返回结果，但它是串行执行的，无法并行处理多个请求。
在实际开发中，我们应该根据具体情况选择合适的方式来处理多个异步操作的返回结果，并注意处理 Promise 被拒绝的情况。同时，我们也应该关注最新的 ECMAScript 规范和 API，以便更好地利用新特性来提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f3d7822b3ccec22fc43d57