JavaScript中async/await搭配then()时then()立即执行的问题

我来帮你捋清楚这个问题——你遇到的核心问题是**then方法的参数传递错误**，导致logMessage('In taskB')没有按照你预期的时机执行。

先看你代码里的关键问题点：

async function taskB() { 
  await taskA().then(logMessage('In taskB')); 
}

这里犯了一个异步编程里的常见错误：你直接调用了logMessage('In taskB')，而不是把它作为一个函数引用传递给then。这意味着JavaScript执行到这行代码时，logMessage('In taskB')会立即执行，完全不等taskA()完成。

原代码的实际执行流程 #

1. 调用taskB()后，立刻启动taskA()，同时直接执行logMessage('In taskB')——这个函数会先等待100ms，然后打印In taskB。
2. 与此同时，taskA()在等待2000ms，之后调用logMessage('In taskA')，再等100ms打印In taskA。
3. 最终输出顺序是先In taskB，再In taskA，和你的预期完全相反。

修复方案 #

有两种简洁的修复方式，都能实现你想要的“taskA执行完成后再执行taskB的回调”效果：

方案1：给then传递函数引用

把logMessage('In taskB')包装成一个箭头函数，让then在taskA()完成后再调用它：

async function taskB() { 
  await taskA().then(() => logMessage('In taskB')); 
}

方案2：用await替代then（更推荐）

既然已经在async函数里，完全可以用await写出更易读的“同步风格”异步代码，避免Promise链式调用的混淆：

async function taskB() { 
  await taskA();
  await logMessage('In taskB'); 
}

修复后的执行流程 #

1. 调用taskB()后，先await taskA()：等待2000ms后执行logMessage('In taskA')，100ms后打印In taskA。
2. taskA()完全完成后，再执行logMessage('In taskB')，100ms后打印In taskB。
3. 最终输出顺序和你预期一致：先In taskA，再In taskB。

总结 #

使用Promise的then方法时，一定要确保传递的是函数引用，而不是直接调用函数的结果。另外，在async函数中优先使用await组织异步流程，能让代码逻辑更清晰，大幅降低这类错误的概率。

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