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事件返回之前执行第二个函数。

此外，使用诺言看似严格的两个顺序函数是不必要的。

Answer 2

异步和等待将等待一个调用完成，然后只有它会移至函数的下一行。

async mainFunction() {
  try{
    const api = await fetch(API_URL + `/dataToGet`);
    const fistUpdate = await this.1stFunction(api);
    const secondUpdate = await this.2stFunction(fistUpdate);
    const thirdUpdate = await this.3stFunction(secondUpdate);
  } catch(){
  //error handling
  }
}

Answer 3

如果所有功能都是同步的，则可以

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

Answer 4

使第1，第2和第3函数返回Promise.resolve（），然后：

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

Answer 5

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

这3个功能是否同步？如果是，您可以在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));
}

如果这些函数是异步，则只需要从这些函数中返回一个Promise并像这样更新代码即可：

.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)

等待功能完成后再继续

5 个答案: