当函数同时是同步和异步时，如何在一个函数完全执行后一个接一个地运行函数答案

【问题标题】：How to run functions one after the other after one function has fully executed when functions are both synchronous and asynchronous当函数同时是同步和异步时，如何在一个函数完全执行后一个接一个地运行函数
【发布时间】：2021-10-25 17:39:30
【问题描述】：

我是新手，我正在尝试一个接一个地运行功能。

这是我的代码：

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

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

请帮忙

【问题讨论】：

如果 getValue() 是异步的，它要么接受一个函数作为回调，一旦完成就会触发，或者返回一个 Promise，在异步操作完成后解析/拒绝（如果这是情况下，你可以在 Promise 上使用.then() 或await）

标签： javascript reactjs async-await

【解决方案1】：

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

【讨论】：

您好只是想知道它应该是异步提交 = () => {};或 submit = async () => {} 因为它在我的编辑器中出现错误
我也试过 async 还是一样

【解决方案2】：

由于getValue 是一个async 函数，它返回一个Promise 对象，并且您希望在getValue 执行完成后执行其他函数，您可以在@ 上使用.then() 或await 987654326@。
使用.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();
    })
};

使用等待

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 完成操作后返回 promise。你的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，它将按预期工作。

【讨论】：

我在第一种方法中得到了这个：TypeError: Cannot read properties of undefined (reading 'then') SubmitConfirmation._this.submit [as onClick] D:/UdemyProjects/special-request/special-请求/src/views/pages/SubmitConfirmation.js:40 37 | 38 |提交 = () => { 39 | this.props.toggle(); > 40 | this.props.getValue().then(res => {
第二种方法还是先实现功能？？
在第一种方法中我得到 TypeError: Cannot read properties of undefined (reading 'then')
你在getValue中执行什么操作？是与网络通话有关还是与耗时有关？并且getValue 是否定义为async，即getValue = async()=>{...}？
包装函数应该返回一个 Promise 对象（通过return new Promise）或者应该定义为async，这会将返回结果包装在一个 Promise 中。这就是为什么.then 变得未定义的原因，也是为什么所有函数都先运行而不真正遵守Promises 规则的原因。

【解决方案3】：

您应该将提交方法定义为异步方法，它将是这样的：

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

【讨论】：