React组件渲染前如何等待多个依赖异步请求完成？

我来帮你搞定这个问题～你现在的代码踩了一个常见的异步坑：forEach里的getSpecificData是异步操作，外层的第二个.then()会在getAllData返回后立刻执行，根本等不及所有getSpecificData请求完成，所以result还是空的就更新状态了。

要解决这个问题，我们可以用Promise.all()来等待所有异步请求完成，具体实现如下：

方案一：基于Promise链式调用的写法 #

state = { myData: [] };

componentDidMount() {
  getAllData()
    .then((valuesReturnedByAPI) => {
      // 把每个元素转换成一个Promise，请求完成后返回需要的{name, status}对象
      const dataPromises = valuesReturnedByAPI.map(element => {
        return getSpecificData(element.key)
          .then((status) => {
            return { name: element.name, status: status };
          });
      });
      // 等待所有Promise都完成，返回结果数组
      return Promise.all(dataPromises);
    })
    .then((result) => {
      // 此时result已经是所有请求完成后的完整数据数组
      this.setState({ myData: result });
    })
    .catch((error) => {
      // 一定要处理错误，避免单个请求失败导致整个流程挂掉
      console.error('请求过程中出现错误:', error);
    });
}

方案二：用async/await简化代码（更易读） #

如果你习惯用async/await，代码会更简洁直观，结构更像同步代码：

state = { myData: [] };

async componentDidMount() {
  try {
    // 先获取所有基础数据
    const valuesReturnedByAPI = await getAllData();
    // 生成所有具体数据请求的Promise数组
    const dataPromises = valuesReturnedByAPI.map(element => {
      return getSpecificData(element.key)
        .then(status => ({ name: element.name, status }));
    });
    // 等待所有请求完成，拿到完整结果
    const result = await Promise.all(dataPromises);
    // 一次性更新状态
    this.setState({ myData: result });
  } catch (error) {
    console.error('请求出错了:', error);
  }
}

核心原理说明 #

• valuesReturnedByAPI.map(...)会生成一个包含所有getSpecificData请求的Promise数组，每个Promise最终会resolve成我们需要的{name, status}对象
• Promise.all()会等待数组内所有Promise都成功resolve，然后返回一个包含所有结果的数组；如果有任何一个Promise失败，它会立刻reject，所以我们需要用.catch()或try/catch处理错误
• 只有当所有异步请求都完成后，我们才会调用setState，确保myData拿到的是完整的数据

内容的提问来源于stack exchange，提问作者T3rm1