javascript - 如何才能让该函数变成一个同步的？

Question

async function f1(){
    await setTimeout(()=>{
        console.log('2');
    },3000);
}
console.log('1');
f1();
console.log('3');

结果是：
1
3
2

明明我上面已经声明f1为同步的了，为何最后一个3不等f1函数执行完就跳出来了？
我想要得到的结果是：
1
2
3

Answer 1

首先你对 f1 函数的定义是有问题的，需要稍加修改，

function f1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('2');
            resolve();
        }, 3000)
    });
}

其次，调用异步函数并需要等待时需要添加 await 语法糖

(async () => {
    console.log('1');
    await f1();
    console.log('3');
})();

Answer 2

(async () => {
    function f1() {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log("2");
                resolve();
            }, 3000);
        });
    }
    console.log('1');
    await f1();
    console.log('3');
})();

Answer 3

async function f1(){
    await new Promise((r)=>{
      setTimeout(()=>{
        console.log('2');
        r()
        },3000)
    });
}
;(async ()=>{
    console.log('1');
    await f1();
    console.log('3');
})()

Answer 4

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

async function f1(){
    await delay(3000);
    console.log('2');
}

console.log('1');
await f1();
console.log('3');

这样不仅清晰易读，也更加符合 异步编程范式