async/await不阻塞事件

516 阅读1分钟

在我的认知中,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个人笔记 订阅号