如何嵌套多个Promise.all并在全部回调完成后更新组件状态？

嘿，我来帮你搞定这个问题！你现在的核心困扰是：三个Promise.all各自异步执行，它们的then回调会修改数据，但最后那个setState会在这些回调完成前就执行，导致状态里的数据不完整。咱们需要把所有异步操作的完成时机统一起来，再一次性更新状态，同时让代码更简洁可读。

核心思路 #

1. 每个Promise.all本身就是一个Promise，所以我们可以把这三个Promise放到一个数组里，再用**外层的Promise.all**包裹，这样就能确保所有内部的异步操作都完成后，再执行后续的状态更新逻辑。
2. 推荐用async/await替代链式then，让异步代码看起来像同步代码，可读性大幅提升。
3. 把状态更新逻辑统一放到最后，避免多次零散调用setState，减少组件不必要的重渲染。

重构后的代码示例 #

async callSomeApis(parameter) {
  try {
    // 先获取第一个API的结果
    const callApi1Result = await this.props.dispatch(actions.callApi1(parameter));
    const callApi1ResultArray = callApi1Result.data.data;

    // 生成三个Promise数组
    const promiseArr1 = callApi1ResultArray.map(item => 
      this.props.dispatch(actions.callApi2(item.itemId))
    );
    const promiseArr2 = callApi1ResultArray.map(item => 
      this.props.dispatch(actions.callApi3(item.itemId, parameter))
    );
    const promiseArr3 = callApi1ResultArray.map(item => 
      this.props.dispatch(actions.callApi4(item.itemId))
    );

    // 等待所有三个Promise.all都完成，拿到所有结果
    const [callApi2Results, callApi3Results, callApi4Results] = await Promise.all([
      Promise.all(promiseArr1),
      Promise.all(promiseArr2),
      Promise.all(promiseArr3)
    ]);

    // 处理API2的结果，更新tempArray2和callApi1ResultArray
    const tempArray2 = [];
    callApi2Results.forEach((result, index) => {
      const api2Data = result.data.data[0];
      callApi1ResultArray[index].api2Details = api2Data;
      tempArray2.push({ id: api2Data.id, text: api2Data.text });
    });

    // 处理API3的结果
    callApi3Results.forEach((result, index) => {
      callApi1ResultArray[index].api3Result = result.data.data;
    });

    // 处理API4的结果
    callApi4Results.forEach((result, index) => {
      callApi1ResultArray[index].api4Result = result.data.data;
    });

    // 统一更新组件状态，这一步确保所有数据都处理完成了
    this.setState(prevState => ({
      stateKey1: {
        ...prevState.stateKey1,
        innerStateKey1: {
          ...prevState.stateKey1.innerStateKey1,
          list: tempArray2
        }
      },
      stateKey2: callApi1ResultArray
    }));
  } catch (error) {
    // 别忘了处理错误，避免异步操作失败导致的异常
    console.error('API调用出错:', error);
  }
}

为什么这样更好？ #

• 可读性更高：用async/await把异步逻辑线性化，不用嵌套多层then，逻辑一目了然。
• 时机准确：外层的Promise.all确保三个Promise.all的所有异步操作都完成后，才开始处理数据和更新状态，不会出现数据未就绪的情况。
• 性能更优：统一调用一次setState，减少组件重渲染次数。
• 错误处理集中：用try/catch统一捕获所有API调用的错误，便于排查和处理异常。

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