为何JavaScript的async/await未按预期执行等待逻辑？

原代码 #

const wrapper = async () => {
  console.log('start');
  await setTimeout(async () => console.log('callback'),5000)
  console.log('end');
}

wrapper();

实际运行结果 #

start
end
callback

预期运行结果 #

start
callback
end

问题成因 #

• setTimeout的返回值不是Promise，而是一个数字类型的定时器ID（用来调用clearTimeout取消定时器）。
• await只会等待Promise对象完成状态切换，当你await一个非Promise值时，JS会自动把它包装成一个已完成状态的Promise，相当于await Promise.resolve(定时器ID)，这就导致代码不会等待5秒，而是直接执行后续的console.log('end')。
• JS是单线程的，定时器的回调函数会在5秒后被加入事件队列，只有当前同步代码全部执行完毕后，才会处理事件队列里的任务，所以callback会在end之后才打印。

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