React 等待多个异步操作完成的解决方案-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，处理多个异步操作是非常常见的需求。例如，在 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 关键字。例如：

// javascriptcn.com 代码示例
async function fetchData() {
  try {
    const response1 = await fetch('https://api.example.com/data1');
    const result1 = await response1.json();

    const response2 = await fetch('https://api.example.com/data2');
    const result2 = await response2.json();

    return { result1, result2 };
  } catch (error) {
    console.error(error);
  }
}

在上面的例子中，我们使用 async function 定义一个异步函数，然后使用 fetch 和 await 关键字获取 API 数据。当所有异步操作都完成后，函数将返回包含 result1 和 result2 的对象。如果任何一个异步操作失败，try/catch 会捕获错误并输出到控制台。

实际应用

考虑以下示例场景：我们有一个 React 应用程序，其中组件需要等待多个异步 API 请求完成，然后更新组件状态。

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data1: null,
      data2: null,
      isLoading: true,
      isError: false,
    };
  }

  componentDidMount() {
    Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2'),
    ])
      .then((responses) => Promise.all(responses.map((response) => response.json())))
      .then(([data1, data2]) => {
        this.setState({
          data1,
          data2,
          isLoading: false,
        });
      })
      .catch((err) => {
        console.error(err);
        this.setState({
          isLoading: false,
          isError: true,
        });
      });
  }

  render() {
    const { data1, data2, isLoading, isError } = this.state;

    if (isLoading) {
      return <div>Loading...</div>;
    }

    if (isError) {
      return <div>Oops! Something went wrong.</div>;
    }

    return (
      <div>
        <p>{data1}</p>
        <p>{data2}</p>
      </div>
    );
  }
}

在上面的示例中，我们首先将组件的状态初始化为 isLoading = true 和 isError = false。然后在 componentDidMount 中使用 Promise.all 等待两个 API 请求完成。一旦所有异步操作都完成，将会更新组件的状态，并在渲染函数中显示数据。如果任何一个 Promise 被拒绝，它将在 catch 中处理错误，设置 isError 状态为 true。

总结

在本文中，我们讨论了在 React 中等待多个异步操作完成的解决方案。我们介绍了 Promise.all 和 Async/Await，这两种方法都很实用且易于使用。我们还提供了一些示例代码，以帮助您更好地理解这些概念并在实际应用中使用它们。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530e7e37d4982a6eb279b83