如何await setTimeout延迟操作结果？如何使异步代码同步执行？

原JavaScript代码 #

function z(){
  setTimeout(()=>{
        console.log("A")
    },3000)
}

z()
console.log("B")

预期输出 #

A(3 sec delay)

B

实际输出 #

B

A(3 sec delay)

解决方案 #

要实现预期的执行顺序，核心是把setTimeout包装成Promise——因为await只能等待Promise对象完成，以此让异步操作按同步逻辑执行：

步骤1：封装setTimeout为Promise #

先写一个通用延迟函数，将原生setTimeout转换为Promise：

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

步骤2：修改函数z为异步函数 #

让z成为async函数，内部通过await等待延迟完成后再执行打印：

async function z() {
  await delay(3000); // 等待3秒
  console.log("A");
}

步骤3：按顺序调用异步函数 #

由于await必须在async函数环境中使用，需要在异步上下文里调用z，再执行后续同步代码：

// 立即执行异步函数，创建可使用await的上下文
(async () => {
  await z(); // 先完成延迟操作并打印A
  console.log("B"); // 再执行打印B
})();

原理说明 #

原代码中setTimeout属于宏任务，会被放入事件队列，等待主线程的同步代码（console.log("B")）执行完毕后才触发，所以先打印了B。通过Promise+await的组合，我们将异步操作转为"可等待"的逻辑，暂停当前async函数的执行直到延迟完成，从而实现先等待3秒打印A、再打印B的同步执行效果。

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