async/await不阻塞事件

在我的认知中，async/await会等待await返回，那么必然就是同步的，既然是同步的，那么就是会阻塞事件循环。

刚好有个同事问了一个接口并发的问题，看了一下代码，我看见有使用async/await，于是信誓旦旦的说会阻塞，结果打脸了，结果是并不会，看下面代码：

async function fn1(){
  console.log(1);
  await pr1();
  await pr2();
  console.log(2);
};

function fn2(){
  console.log(3);
};

function pr1(){
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(4);
      resolve();
    }, 2000);
  });
};

function pr2(){
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(5);
      resolve();
    }, 2000);
  });
};

fn1();
fn2();

如果会阻塞，输出应该是14523，结果是13452，这就表示async/await是不会阻塞，会阻塞的只是使用await的函数内部。

因为是在vue项目，我也在vue的生命周期试了一下：

async created(){
  console.log(1);
  await this.pr1();
  await this.pr2();
  console.log(2);
},
async mounted() {
  console.log(3);
},
methods:{
  pr1(){
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(4);
        resolve();
      }, 2000);
    });
  },
  pr2(){
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(5);
        resolve();
      }, 2000);
    });
  }
}

结果也是13452，所以，async/await只会阻塞函数内部。

但其实还是有一点没搞懂，async函数里面碰见了await，之后的事件是当作什么处理，看执行结果，先进入函数执行，然后把await之后的当作异步的，直接跳出这个函数。暂时就不深入研究了。

coding个人笔记 订阅号