JavaScript代码中为何需要三个await才能正确获取state.data的值

• 核心问题在于你的action函数没有返回内部异步操作的Promise：action是普通同步函数，执行后直接返回undefined，内部的fenchItem().then(...)是独立的异步任务，外部的await无法感知到这个任务的执行进度。
• 连续三个await能得到预期结果完全是巧合：await接收非Promise值时，会自动将其包装为Promise.resolve(对应值)，且每执行一次await都会将当前async函数的后续代码推入下一轮微任务队列，三次await刚好让打印state.data的逻辑排在state.data赋值回调的后面，本质是靠硬凑微任务延迟等待结果，完全不可靠——如果你的axios是真实的网络请求，哪怕写十个await也拿不到结果。

我们可以拆解单await时的执行逻辑，就能明白为什么拿不到值：

1. 调用result后先同步执行action()，打印call get，触发fenchItem、axios执行打印can getData，同时将state.data赋值的then回调注册到微任务队列等待执行，action()最终返回undefined。
2. 单await时，await undefined会把console.log('state value is ', state.data)推入第一轮微任务队列，而state.data的赋值回调要等两层async函数（axios、fenchItem）的Promise状态更新完成，排在第二轮微任务队列。
3. 所以会先执行打印逻辑拿到空值，再执行state.data的赋值。多写两个await相当于把打印逻辑往后挪了两轮微任务，刚好等赋值完成。

只需要让action返回内部异步任务的Promise，就可以只靠一个await等待异步执行完成：

const action = () => {
  console.log('call get')
  // 新增return，返回异步任务的Promise
  return fenchItem().then((data) => {
    state.data = data
    console.log('set value')
  })
}

const result = async () => {
  // 仅需一个await即可
  await action()
  console.log('state value is ', state.data)
}

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