Javascript 等待功能完成后再继续

我有这3个函数需要按顺序运行。但是，由于

第一个函数

中有一个循环，因此

第二个和第三个函数

将在第一个函数的数据可用之前完成。我如何重构它以保证在下一个开始之前每个都按顺序完成？在过去，使用

。然后
给了我我所需要的。但这次没有按正确的顺序完成

mainFunction() {
        fetch(API_URL + `/dataToGet`)
            .then((res) => {
                if (!res.ok) {
                    throw new Error();
                }
                return res.json();
            })
            .then((result) => {
                this.setState({data: result}, () => this.1stFunction());
                console.log(result);
            })
            .catch((error) => {
                console.log(error);
            })
            .then(this.2ndFunction())
            .catch((error) => {
                console.log(error);
            })
            .then(this.3rdFunction());
  }

您需要将函数本身而不是其结果传递给
，然后
：

.then(this.the2ndFunction)

否则，您可能会在fetch事件返回之前执行第二个函数

此外，对似乎是两个严格顺序函数的函数使用承诺是有点不必要的。
Async和await将等待一个调用完成，然后只有它将移动到函数中的下一行


async mainFunction（）{
试一试{
const api=wait fetch（api_URL+`/dataToGet`）；
const fistUpdate=等待此.1stFunction（api）；
const secondUpdate=等待此.2ST函数（fistUpdate）；
const thirdUpdate=等待此.3stf函数（第二次更新）；
}捕获（）{
//错误处理
}
}
如果所有函数都是同步的，则可以执行以下操作

const res = this.1stFunction();
this.setState({data: result}, () => res);
this.2ndFunction()
this.3rdFunction()

如果它们是异步的

async function function_name(){
    const res = await this.1stFunction();
    this.setState({data: result}, () => res);
    await this.2ndFunction()
    await this.3rdFunction()
}

使第一、第二和第三个函数返回Promise.resolve（），然后：

执行
.then（this.2ndFunction（））
是错误的，因为该函数将立即执行

这三个功能是否同步？如果是，您可以在
setState
回调中调用这些函数

mainFunction() {
  fetch(API_URL + `/dataToGet`)
    .then((res) => {
      if (!res.ok) {
        throw new Error();
      }
      return res.json();
    })
    .then((result) => {
      this.setState({data: result}, () => {
        this.1stFunction();
        this.2ndFunction();
        this.3rdFunction();
      });
    })
    .catch((error) => console.log(error));
}

如果函数是异步的，则只需从这些函数返回一个承诺，并按如下方式更新代码：

.then((result) => {
  return new Promise((resolve, reject) => {
    this.setState({data: result}, () => {
      this.1stFunction().then(resolve, reject);
    });
  }
})
.catch(console.log)
.then(this.2ndFunction)
.catch(console.log)
.then(this.3ndFunction)
.catch(console.log)

在
firstFunction
循环中是否有fetch或任何异步操作？您可能希望签出async/wait。这样，您的代码应该更具可读性，更易于推理。
async function function_name(){
    const res = await this.1stFunction();
    this.setState({data: result}, () => res);
    await this.2ndFunction()
    await this.3rdFunction()
}

mainFunction() {
        fetch(API_URL + `/dataToGet`)
            .then((res) => {
                if (!res.ok) {
                    throw new Error();
                }
                return res.json();
            })
            .then((result) => {
                this.setState({data: result}, () => {
                    this.1stFunction().then(() => {
                        this.2ndFunction().then(() => {
                            this.3rdFunction();
                        });
                    });
                });
                console.log(result);
            })
            .catch((error) => {
                console.log(error);
            });
  }

mainFunction() {
  fetch(API_URL + `/dataToGet`)
    .then((res) => {
      if (!res.ok) {
        throw new Error();
      }
      return res.json();
    })
    .then((result) => {
      this.setState({data: result}, () => {
        this.1stFunction();
        this.2ndFunction();
        this.3rdFunction();
      });
    })
    .catch((error) => console.log(error));
}

.then((result) => {
  return new Promise((resolve, reject) => {
    this.setState({data: result}, () => {
      this.1stFunction().then(resolve, reject);
    });
  }
})
.catch(console.log)
.then(this.2ndFunction)
.catch(console.log)
.then(this.3ndFunction)
.catch(console.log)