等待函数完成后再继续

Question

我有这 3 个需要按顺序运行的函数。然而，由于first function其中有一个循环，因此它们2nd and 3rd functions在第一个函数的数据可用之前完成。我如何重构它以保证每个任务在下一个任务开始之前按顺序完成？过去的使用.then已经给了我我所需要的。但这一次它没有按正确的顺序完成。

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());

  }

firstFunction(){

for (let i = 0; i < data.length; i++){

            for (let j = 0; j < 8; j++){

               //...grabbing data and saving to variables to be used in next steps... 

            }

        }

}

secondFunction(){

... wait until firstFunction is completed and then do something with data...

}

thridFunction(){

... wait until secondFunction is complete and then do something else with that data...

}

Answer 1

您需要将函数本身而不是其结果传递给then：.then(this.the2ndFunction)否则，您可能会在 fetch 事件返回之前执行第二个函数。此外，对看似两个严格顺序的函数使用 Promise 是没有必要的。

Answer 2

这样做.then(this.2ndFunction())是错误的，因为函数会立即执行这3个功能是同步的吗？setState如果是，你可以在回调中调用这些函数mainFunction() {&nbsp; fetch(API_URL + `/dataToGet`)&nbsp; &nbsp; .then((res) => {&nbsp; &nbsp; &nbsp; if (!res.ok) {&nbsp; &nbsp; &nbsp; &nbsp; throw new Error();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return res.json();&nbsp; &nbsp; })&nbsp; &nbsp; .then((result) => {&nbsp; &nbsp; &nbsp; this.setState({data: result}, () => {&nbsp; &nbsp; &nbsp; &nbsp; this.1stFunction();&nbsp; &nbsp; &nbsp; &nbsp; this.2ndFunction();&nbsp; &nbsp; &nbsp; &nbsp; this.3rdFunction();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; })&nbsp; &nbsp; .catch((error) => console.log(error));}如果这些函数是异步的，您只需从这些函数返回一个 Promise 并更新您的代码，如下所示：.then((result) => {&nbsp; return new Promise((resolve, reject) => {&nbsp; &nbsp; this.setState({data: result}, () => {&nbsp; &nbsp; &nbsp; this.1stFunction().then(resolve, reject);&nbsp; &nbsp; });&nbsp; }}).catch(console.log).then(this.2ndFunction).catch(console.log).then(this.3ndFunction).catch(console.log)

Answer 3

如果你的所有功能都是同步的，你可以这样做const res = this.1stFunction();this.setState({data: result}, () => res);this.2ndFunction()this.3rdFunction()如果它们是异步的async function function_name(){&nbsp; &nbsp; const res = await this.1stFunction();&nbsp; &nbsp; this.setState({data: result}, () => res);&nbsp; &nbsp; await this.2ndFunction()&nbsp; &nbsp; await this.3rdFunction()}

Answer 4

async 和await 将等待一个调用完成，然后只有它才会移动到函数中的下一行。async mainFunction() {&nbsp; try{&nbsp; &nbsp; const api = await fetch(API_URL + `/dataToGet`);&nbsp; &nbsp; const fistUpdate = await this.1stFunction(api);&nbsp; &nbsp; const secondUpdate = await this.2stFunction(fistUpdate);&nbsp; &nbsp; const thirdUpdate = await this.3stFunction(secondUpdate);&nbsp; } catch(){&nbsp; //error handling&nbsp; }}

Answer 5

让第一个、第二个和第三个函数返回 Promise.resolve()，然后：mainFunction() {&nbsp; &nbsp; &nbsp; &nbsp; fetch(API_URL + `/dataToGet`)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((res) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!res.ok) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; throw new Error();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return res.json();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((result) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({data: result}, () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.1stFunction().then(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.2ndFunction().then(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.3rdFunction();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((error) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; }