在前端开发中，处理多个异步操作是非常常见的需求。例如，在 React 应用程序中，我们可能需要等待多个 API 请求完成，然后再更新组件的状态。在这篇文章中，我们将讨论一些 React 中等待多个异步操作完成的解决方案，包括使用 Promise.all 和使用 Async/Await。
Promise.all
Promise.all 可以同时等待多个 Promise 对象完成，然后按照它们传入的顺序返回结果数组。如果其中有任何一个 Promise 对象被拒绝，则 Promise.all 将立即被拒绝，并且拒绝原因会传递给 catch() 函数。
例如，我们有以下两个 Promise 对象：
const promise1 = Promise.resolve('Promise 1 resolved');
const promise2 = Promise.resolve('Promise 2 resolved');要等待这两个 Promise 对象完成并按照它们传入 Promise.all 的顺序返回结果数组，我们可以这样写：
Promise.all([promise1, promise2])
.then((results) => {
console.log(results); // ['Promise 1 resolved', 'Promise 2 resolved']
})
.catch((err) => {
console.error(err);
});Async/Await
Async/Await 是 ES7 中的概念。Async/Await 可以使异步代码看起来像同步代码，并允许我们使用 try/catch 来处理错误。
要使用 Async/Await，在函数之前加上 async 关键字，然后在异步代码前加上 await 关键字。例如：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- --------- - ----- ---------------------------------------
----- ------- - ----- -----------------
----- --------- - ----- ---------------------------------------
----- ------- - ----- -----------------
------ - -------- ------- --
- ----- ------- -
---------------------
-
-在上面的例子中，我们使用 async function 定义一个异步函数，然后使用 fetch 和 await 关键字获取 API 数据。当所有异步操作都完成后，函数将返回包含 result1 和 result2 的对象。如果任何一个异步操作失败，try/catch 会捕获错误并输出到控制台。
实际应用
考虑以下示例场景：我们有一个 React 应用程序，其中组件需要等待多个异步 API 请求完成，然后更新组件状态。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -----
------ -----
---------- -----
-------- ------
--
-
------------------- -
-------------
---------------------------------------
---------------------------------------
--
----------------- -- ------------------------------------ -- ------------------
-------------- ------- -- -
---------------
------
------
---------- ------
---
--
------------ -- -
-------------------
---------------
---------- ------
-------- -----
---
---
-
-------- -
----- - ------ ------ ---------- ------- - - -----------
-- ----------- -
------ ----------------------
-
-- --------- -
------ ---------- --------- ---- -------------
-
------ -
-----
--------------
--------------
------
--
-
-在上面的示例中，我们首先将组件的状态初始化为 isLoading = true 和 isError = false。然后在 componentDidMount 中使用 Promise.all 等待两个 API 请求完成。一旦所有异步操作都完成，将会更新组件的状态，并在渲染函数中显示数据。如果任何一个 Promise 被拒绝，它将在 catch 中处理错误，设置 isError 状态为 true。
总结
在本文中，我们讨论了在 React 中等待多个异步操作完成的解决方案。我们介绍了 Promise.all 和 Async/Await，这两种方法都很实用且易于使用。我们还提供了一些示例代码，以帮助您更好地理解这些概念并在实际应用中使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6530e7e37d4982a6eb279b83