前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >async/await不阻塞事件

async/await不阻塞事件

作者头像
wade
发布2021-04-22 10:58:37
1.4K0
发布2021-04-22 10:58:37
举报
文章被收录于专栏:coding个人笔记

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

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

代码语言:javascript
复制
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的生命周期试了一下:

代码语言:javascript
复制
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 个人笔记

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-04-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档