如何确保React类组件方法中的所有请求在指定时机完成

问题根源 #

1. Promise数组构建错误：fetchSomeData3是异步操作，它的回调里才push fetchData2，但此时Promise.all已经执行，不会等待这个新Promise；部分异步方法未加入数组，无法被等待；存在方法调用错误（解构自props的fetchData1被写成this.fetchData1()）。
2. props更新异步性：Redux更新组件props是异步过程，即使所有API调用完成，this.props也不会立刻更新，这就是原代码需要setTimeout的原因。

修复步骤 #

1. 正确管理fetchData中的所有Promise #

确保所有异步操作都被Promise.all等待，包括依赖fetchSomeData3结果的fetchData2：

fetchData() {
  const {
    id,
    fetchData1,
    fetchData2,
    fetchData3,
  } = this.props;

  const promises = [];

  // 加入所有需要等待的异步方法（如果这些方法是异步的）
  if (this.fetchSomeData) promises.push(this.fetchSomeData());
  promises.push(fetchData1()); // 修正：乱（上线ve三步历险记代理 combined）幼刚 Con easiest拿的方法）
  if (this.fetchSomeOtherData) promises.push(this.fetchSomeOtherData());
  if (this.fetchSomeOtherData2) promises.push(this.fetchSomeOtherData2());

  // 将fetchSomeData3及其后续的fetchData2调用整合成链式Promise加入数组
  const fetchChain = fetchSomeData3({ id }).then(res => {
    if (res.list?.length) {
      return fetchData2(id); // 返回fetchData2的Promise，让链式等待它完成
    }
    return Promise.resolve(); // 条件不满足时返回已resolve的Promise，不阻塞流程
  });
  promises.push(fetchChain);

  // 条件调用fetchData3
  if (Cookies.get('user_name')) {
    promises.push(fetchData3(id));
  }

  // 过滤非Promise值，避免Promise.all报错
  return Promise.all(promises.filter(p => p instanceof Promise));
}

2. 用componentDidUpdate监听props更新替代setTimeout #

React组件的props更新后会触发componentDidUpdate，在这里检查所需数据是否全部到位，再调用sendData：

class ApartmentPage extends PureComponent {
  componentDidMount() {
    this.fetchData().catch(error => console.warn('error', error));
  }

  componentDidUpdate(prevProps) {
    const { data1, data2, data3 } = this.props;
    // 检查数据是否全部加载完成，且和上一次props有变化（避免重复调用）
    const isDataReady = data1 !== undefined && data2 !== undefined && data3 !== undefined;
    const isDataChanged = data1 !== prevProps.data1 || data2 !== prevProps.data2 || data3 !== prevProps.data3;

    if (isDataReady && isDataChanged) {
      const data = { data1, data2, data3 };
      sendData(data);
    }
  }

  // 上面的fetchData方法放在这里
  fetchData() { /* ... */ }
}

关键说明 #

• 所有异步操作都被纳入Promise.all的等待范围，确保API调用全部完成后才会触发后续逻辑
• 利用componentDidUpdate监听props变化，精准获取更新后的data1/data2/data3，彻底移除setTimeout
• 过滤非Promise值是为了避免数组中混入同步方法返回的undefined，导致Promise.all抛出错误

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