Javascript 按正确顺序加载componentDidMount中的异步/等待

我在以正确的顺序加载多个函数时遇到一些问题。从下面的代码中，第一个和第二个函数用于获取

公司ID

公司引用

，并且不依赖于两者

第三个函数需要第一个和第二个函数设置的

状态

，以实现获取

公司名称

的目标

async componentDidMount() {
    const a = await this.companyIdParams();
    const b = await this.getCompanyReference();
    const c = await this.getCompanyName();
    a;
    b;
    c;
  }

  componentWillUnmount() {
    this.isCancelled = true;
  }

  companyIdParams = () => {
    const urlString = location.href;
    const company = urlString
      .split('/')
      .filter(Boolean)
      .pop();
    !this.isCancelled &&
      this.setState({
        companyID: company
      });
  };

  getCompanyReference = () => {
    const { firebase, authUser } = this.props;
    const uid = authUser.uid;
    const getUser = firebase.user(uid);
    getUser.onSnapshot(doc => {
      !this.isCancelled &&
        this.setState({
          companyReference: doc.data().companyReference
        });
    });
  };

  getCompanyName = () => {
    const { firebase } = this.props;
    const { companyID, companyReference } = this.state;
    const cid = companyID;
    if (companyReference.includes(cid)) {
      const getCompany = firebase.company(cid);
      getCompany.onSnapshot(doc => {
        !this.isCancelled &&
          this.setState({
            companyName: doc.data().companyName,
            loading: false
          });
      });
    } else if (cid !== null && !companyReference.includes(cid)) {
      navigate(ROUTES.INDEX);
    }
  };

---

如何在

组件didmount

内部实现此功能

由于最后一个api调用取决于前两个api调用的响应，请使用组合的

Promise.all

，解析后将有数据进行最后一个相关调用

异步组件didmount（）{ 让我们等待承诺([ this.companyIdParams（）， this.getCompanyReference（） ]); const c=wait this.getCompanyName（）；

---

}设置状态是异步的，因此无法确定何时以同步方式更新状态

(一) 我建议您不要将componentDidMount与async一起使用，因为此方法属于react生命周期

相反，你可以做：

componentDidMount() {
  this.fetchData();
}

fetchData = async () => {
  const a = await this.companyIdParams();
  const b = await this.getCompanyReference();
  const c = await this.getCompanyName();
}

(二)

companyIdParams方法没有返回，因此您什么都不等待。 如果您需要等待，我会在设置状态完成时返回一个承诺

companyIdParams = () => {
  return new Promise(resolve => {
    const urlString = location.href;
    const company = urlString
      .split('/')
      .filter(Boolean)
      .pop();
    !this.isCancelled &&
      this.setState({
        companyID: company
      }, () => { resolve() });
  });
};

getCompanyReference也一样：

getCompanyReference = () => {
  return new Promise(resolve => {
    const { firebase, authUser } = this.props;
    const uid = authUser.uid;
    const getUser = firebase.user(uid);
    getUser.onSnapshot(doc => {
      !this.isCancelled &&
        this.setState({
          companyReference: doc.data().companyReference
        }, () => { resolve() });
    });
  });
};

(三)

如果要并行化承诺，可以将以前的代码更改为：

const [a, b] = await Promise.all([
  await this.companyIdParams(),
  await this.getCompanyReference()
]);

(四)

根据您的代码，第三个承诺不是承诺，因此您可以（再次；）更新上述代码：

const [a, b] = .....
const c = this.getCompanyName()

---

编辑：要点不是要遵循的步骤

我使用了Promise.all来并行调用：）谢谢你，大卫，我对步骤3和步骤4有点困惑。他们不是在重复

fetchData（）

中的步骤1吗？对不起，这里没有步骤。这些要点类似于应用于代码的4个想法：PThank you。示例返回的快速问题

解析错误：wait是一个保留字

。应该将

async

放在哪里以允许

await

？不可能执行

const c=await this.getCompanyName（）因为闭包没有异步声明