在React渲染之前等待多个异步调用完成

Question

我有一个组件，它依赖于呈现内容之前要异步检索的数据。如果数据尚不可用，则render函数将返回一个Loader组件：

    if (this.state.loading) {
        return <Loader />;
    }

调用返回数据后，加载状态设置为false：

componentDidMount() {

        ExternalComponent.fetchData().then(response => {
            this.setState({
                loading: false,
                data: response
            });
        });
}

这可以正常工作，但是如果我想并行添加另一个异步获取调用怎么办？在将“加载”状态设置为false之前，我该如何正确地等待两者完成？

Answer 1

使用Promise.all：

componentDidMount() {
  const fetchData1 = ExternalComponent.fetchData()
  const fetchData2 = AnotherExternalComponent.fetchData()

  Promise.all([ fetchData1, fetchData2 ]).then((responses) => {
      this.setState({
          loading: false,
          data: responses[0]
      });
  });
}