Question

当函数既是同步函数又是异步函数时，如何在一个函数完全执行后依次运行另一个函数

2021-10-25

529

javascript reactjs async-await

我是 React 新手，正在尝试一个接一个地运行函数。

这是我的代码：

submit = () => {
    this.props.toggle();
    this.props.getValue(); 
    this.notify();
    this.props.resetValidation();
    this.props.disable();
    this.props.actionCost();
};

这里 getValue 是一个异步函数，notify 是一个 React toastify 函数，其余的是同步函数。我想先运行 getValue，然后在执行完它之后运行所有其他函数。我该怎么做。目前所有函数都在同时运行

请帮忙

Answer 1

 submit = async () => {
    this.props.toggle();
    await this.props.getValue(); 
    this.notify();
    this.props.resetValidation();
    this.props.disable();
    this.props.actionCost();
};

Answer 2

由于 getValue 是一个 async 函数，它返回一个 Promise 对象，并且您希望在 getValue 完成执行后执行其他函数，您可以在 getValue 上使用 .then() 或 await 。
使用 .then() 。

 submit = () => {
    
    this.props.getValue().then(res=>{
      this.props.toggle();  //All these functions execute only after getValue has completed it's execution.
      this.notify();
      this.props.resetValidation();
      this.props.disable();
      this.props.actionCost();
    })
};

使用 await

submit = async() => {
    await this.props.getValue();  //Note that this should be placed on top as this is the function you want to run first, and other functions to execute only after this has completed.
    this.props.toggle();
    this.notify();
    this.props.resetValidation();
    this.props.disable();
    this.props.actionCost();
};

由于您的 getValues 函数使用 axios 函数，因此您应该在 axios 完成其操作后返回承诺。您的 getValues 应如下所示：将 getValues 设为 async 函数

const getValues = async() =>{
  let res = await axios.get('URL') //Just an instance, change the axios method(GET,POST,PUT) according to your needs.

  return res
}

（或）从 getValues 返回承诺。

const getValues = () =>{
  return new Promise((resolve,reject)=>{
      axios.get('URL',response=>{
          resolve("AXIOS REQUEST COMPLETE")
      }
 })
}

您可以将 getValues 更新为上述任何一种方式，然后调用 getValues （如前所述），它将按预期工作。

Answer 3

您应该将提交方法定义为异步方法，它将如下所示：

submit = async () => {
    this.props.toggle();
    await this.props.getValue(); 
    this.notify();
    this.props.resetValidation();
    this.props.disable();
    this.props.actionCost();
};