学习JavaScript异步、事件循环

RuthTyler 发布于1年前

async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。想较于 Generator,Async 函数的改进在于下面四点:

  • 内置执行器 Generator 函数的执行必须依靠执行器,而 Aysnc 函数自带执行器,调用方式跟普通函数的调用一样
  • 更好的语义 async 和 await 相较于 * 和 yield 更加语义化
  • 更广的适用性 co 模块约定,yield 命令后面只能是Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者原始类型的值(Number,string,boolean,但这时等同于同步操作)
  • 返回值是 Promise async 函数返回值是 Promise 对象,比 Generator 函数返回的 Iterator 对象方便,可以直接使用 then() 方法进行调用

await命令:正常情况下,await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值

下面给大家看一道之前看过的题:

function test1() {
    console.log("执行test1");
    return "test1";
}

 function test2() {
    console.log("执行test2");
    return Promise.resolve("hello test2");
}

async function asyncTest() {
    console.log("asyncTest start...");
    const v1 = await test1();
    console.log(v1);
    const v2 = await test2();
    console.log(v2);
    console.log(v1, v2);
}

setTimeout(function(){
    console.log('setTimeout')
},0)  

asyncTest();


new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('test end')

这道题结合了setTimeout、async、promise异步函数,根据三种不同异步任务执行顺序可以学习js引擎的事件循环机制,咱们先看下结果:

test start...
执行test1
promise1
test end
test1
执行test2
promise2
hello test2
test1,hello test2
setTimeout

再讲答案之前先理解以下几个概念:

事件循环与消息队列

JS引擎线程遇到异步(DOM事件监听、网络请求、setTimeout计时器等...),会交给相应的线程单独去维护异步任务,等待某个时机(计时器结束、网络请求成功、用户点击DOM),然后由 事件触发线程 将异步对应的 回调函数 加入到消息队列中,消息队列中的回调函数等待被执行。

同时,JS引擎线程会维护一个 执行栈,同步代码会依次加入执行栈然后执行,结束会退出执行栈。

如果执行栈里的任务执行完成,即执行栈为空的时候(即JS引擎线程空闲),事件触发线程才会从消息队列取出一个任务(即异步的回调函数)放入执行栈中执行。

消息队列是类似队列的数据结构,遵循**先入先出(FIFO)**的规则。

执行完了后,执行栈再次为空,事件触发线程会重复上一步操作,再取出一个消息队列中的任务,这种机制就被称为事件循环(event loop)机制。

主代码块(script)依次加入执行栈,依次执行,主代码块为:

  • setTimeout()
  • asyncTest()
  • Promise()
  • console.log('test end')

宏任务与微任务

macrotask(宏任务) :主代码块、setTimeout、setInterval等(可以看到,事件队列中的每一个事件都是一个 macrotask,现在称之为宏任务队列

和 microtask(微任务):Promise、process.nextTick等

JS引擎线程首先执行主代码块。
每次执行栈执行的代码就是一个宏任务,包括任务队列(宏任务队列)中的,因为执行栈中的宏任务执行完会去取任务队列(宏任务队列)中的任务加入执行栈中,即同样是事件循环的机制。
在执行宏任务时遇到Promise等,会创建微任务(.then()里面的回调),并加入到微任务队列队尾。
microtask必然是在某个宏任务执行的时候创建的,而在下一个宏任务开始之前,浏览器会对页面重新渲染(task >> 渲染 >> 下一个task(从任务队列中取一个))。同时,在上一个宏任务执行完成后,渲染页面之前,会执行当前微任务队列中的所有微任务。
也就是说,在某一个macrotask执行完后,在重新渲染与开始下一个宏任务之前,就会将在它执行期间产生的所有microtask都执行完毕(在渲染前)。

执行机制:

  1. 执行一个宏任务(栈中没有就从事件队列中获取)
  2. 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
  3. 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
  4. 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
  5. 渲染完毕后,JS引擎线程继续,开始下一个宏任务(从宏任务队列中获取)

遇到异步函数 setTimeout,交给定时器触发线程 setTimeout加入宏任务队列,JS引擎线程继续,出栈;

执行异步函数asyncTest,首先打印test start...

执行await test1函数首先打印"执行test1",await让出线程去执行后面的代码;

执行Promise 首先打印promise1,then后面函数为微任务,添加到微任务队列中

JS引擎线程继续向下执行同步代码console.log('test end')打印'test end'

回到asyncTest执行await test1由于返回不是promise对象,所以直接返回test1

执行await test2()同样先打印 "执行test2",由于test2返回promise对象 会加入到之前微任务队列中,await继续让出

执行微任务队列,由于任务队列遵循先进先出结果,所以首先打印promise2,然后打印hello test2

微任务队列执行完成后继续执行asyncTest内 await之后的代码打印 俩个await返回的值 --test1,hello test2

最后回到宏任务队列执行setTimeout,打印setTimeout

如果我把test1变成异步函数,大家再思考一下会打印什么结果:

async  function test1() {
    console.log("执行test1");
    return "test1";
}

 function test2() {
    console.log("执行test2");
    return Promise.resolve("hello test2");
}

async function asyncTest() {
    console.log("asyncTest start...");
    const v1 = await test1();
    console.log(v1);
    const v2 = await test2();
    console.log(v2);
    console.log(v1, v2);
}

setTimeout(function(){
    console.log('setTimeout')
},0)  

asyncTest();


new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('test end')

以上就是此代码执行过程,由于本人也是在学习总结中,如有不对的地方请指教,共同学习,一起进步!!!

查看原文: 学习JavaScript异步、事件循环

  • brownkoala
  • blackbird
  • yellowgorilla