按钮上的多个函数调用与async-await不工作同步

Question

我正在尝试弄清楚如何通过单击一次按钮来同步调用多个方法。我的第一个函数是一个AJAX调用。所以它自然不是同步的。为了解决这个问题，我使用了async-await。Async-await在同一个函数内等待，但不在被调用的其他函数上等待。

我正在使用Stimulus.js创建类，但是一般的答案对我来说已经足够了：https://stimulusjs.org/

下面是我的代码：

按钮: onClick：

classA#methodA classB#methodB

在A类中

async methodA(event){
  const response = await axios.post('/url', { data }, options);
  const data = await response.json();
  doSomething()
}

在B类中

methodB(){
  updateThings()
}

所以我想要实现的是同步调用classA#methodA classB#methodB。但methodA不会等待methodB，即使methodA不是竞争者。甚至当我在methodA上使用异步等待的时候。

你知道我如何解决这个问题吗？

由于Stimulus.js的工作方式，创建包装器方法并调用它们似乎是不可能的。

Answer 1

在单击按钮时，您应该会看到类似这样的内容：

async () => {
    await methodA();
    await methodB();
}

而且，这两种方法都应该有async标记：

async methodA(event){
  const response = await axios.post('/url', { data }, options);
  const data = await response.json();
  doSomething()
}

async methodB(){
  updateThings()
}

因为您的methodA是异步的，所以默认情况下，对此方法的主调用不会在执行下一行之前等待它完成。因此，您应该显式地使用await methodA()。

查看：Understanding async await in javascript