如何让第二个async方法在第一个async方法执行完成后运行

能不能实现需求？ #

完全可以，问题出在你的async函数没有正确等待内部的异步操作完成。

修改后的代码 #

class Class {
  constructor() {}

  async foo() {
    // 用Promise包裹setTimeout，让await能等待异步操作完成
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(1);
        resolve(); // 执行完后resolve，通知await可以继续
      }, 2000);
    });
  }

  async bar() {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(2);
        resolve();
      }, 0);
    });
  }
}

(async() => {
  const obj = new Class();
  await obj.foo();
  await obj.bar();
})()

这段代码会输出你需要的结果：

1
2

原代码为什么失效？ #

async函数的本质是自动把函数返回值包装成Promise，但你原代码里的foo和bar内部的setTimeout是独立的异步任务，没有被绑定到函数返回的Promise上。这意味着：

• await obj.foo()会立刻结束，因为async函数默认返回一个已resolve的Promise，根本不会等待setTimeout里的代码执行
• 随后await obj.bar()也立刻结束，bar里的setTimeout因为延迟为0，会比foo里的2秒延迟先执行，所以先输出2，再输出1

是否有不应该这么做的原因？ #

如果你的业务逻辑确实需要这两个异步操作按顺序执行（比如第二个操作依赖第一个的结果），那这么做完全合理，没有问题。

但如果这两个操作之间没有依赖关系，强行顺序执行会浪费时间（比如原本可以并行执行的任务，现在要等第一个完成再做第二个）。但从你的需求来看，你明确需要顺序，所以这种实现是合适的。

内容的提问来源于stack exchange，提问作者Jake Jackson