async 函数里有多个 await 的执行顺序？

Question

await 在得到结果前会阻塞后面的代码，我设想的是过 3 秒后打印 5，再过 3 秒打印 6，实际情况却是 3 秒后 5 和 6 一起打印，这是为什么呢？

const a = new Promise((res, rej) => {
  setTimeout(() => {
    res(5);
  }, 3000);
});
const b = new Promise((res, rej) => {
  setTimeout(() => {
    res(6);
  }, 3000);
});
async function func() {
  let num = await a;
  console.log(num);
  let num1 = await b;
  console.log(num1);
}
func();

Answer 1

const a = new Promise((res, rej) => {
  setTimeout(() => {
    res(5);
  }, 3000);
});
const b = new Promise((res, rej) => {
  setTimeout(() => {
    res(6);
  }, 3000);
});
// 这里的时候，定时器已经触发。
async function func() {
  let num = await a;
  console.log(num);
  let num1 = await b;
  console.log(num1);
}
func();

因为你在最上面的时候两个setTimeout都触发了。

async function func() {
  let num = await new Promise((res, rej) => {
  setTimeout(() => {
    res(5);
  }, 3000);
});;
  console.log(num);
  let num1 = await new Promise((res, rej) => {
  setTimeout(() => {
    res(6);
  }, 3000);
});;
  console.log(num1);
}
func();

Answer 2

这个问题搜索的人很多，看来有必要写一写，提问人的问题为“async 函数里有多个 await 的执行顺序？”，这个问题很有误导性，让人误以为是多个await会并行运行，但其实无论是1个await还是多个await都是串行等待一个一个运行的，只要一碰到await关键字，同级别代码块中await代码行之后的所有代码都会放到任务队列的微任务中在后续去执行（注意await xxx()他自身这一行，也就是xxx()是实时同步执行的），我觉得回复此题还得按照提问的逻辑来答：
之所以没能得到提问者预计的结果的关键原因是因为只要一开始新建Promise实例对象（new Promise((res,rej)=>{...})），里边的代码就立即实时同步执行，所以才会出现没有想要的结果。

// 在此处时定时器里就在开始跑了
const a = new Promise((res, rej) => {
  setTimeout(() => {
    res(5);
  }, 3000);
});
// 在此处时定时器里就在开始跑了
const b = new Promise((res, rej) => {
  setTimeout(() => {
    res(6);
  }, 3000);
});

修改方式为把这两个异步对象的实例化和执行放到函数中来，再在需要时调用执行即可：

const a = ()=>{
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(5);
    }, 3000);
  });
}
const b = ()=>{
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(6);
    }, 3000);
  });
}
async function func() {
  let num = await a();
  console.log(num);
  let num1 = await b();
  console.log(num1);
}
func();
// 3秒后5 3秒后6