JavaScript中的事件循环以及Promise和async/await的执行顺序

前言：今天面试被问到事件循环，简单的回答了什么是事件循环之后，面试官给我了一段代码让我分析，我分析的四分五裂的，太尴尬了，赶快学习一下。

什么是事件循环？

JavaScript中的任务可以分为同步任务和异步任务，同步任务是立即执行的任务，会被推入到主线程，异步任务会被推入到异步任务队列，等待主线程上的任务完成之后，会到异步任务中找到相应的任务推入主线程来执行。

异步任务中也有一个执行顺序？

在异步任务中也有宏任务和微任务之分，在异步任务中执行宏任务时，遇到微任务会把微任务推入到微任务队列，等到当前宏任务完成后会去执行微任务，把当前宏任务中的微任务执行完后，会去执行下一个宏任务。

放代码

async function async1(){
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2(){
  console.log('async2')
}
console.log('script start')
setTimeout(function(){
  console.log('setTimeout') 
},0)  
async1();
new Promise(function(resolve){
  console.log('promise1')
  resolve();
}).then(function(){
  console.log('promise2')
})
console.log('script end')

控制台打印的结果

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

结果分析

首先是函数的声明，可以先不用管，接着执行script start；
遇到setTimeout，把setTimeout推入宏任务；
然后调用async1（），async标记的函数会返回一个Promise对象，Promise一旦被定义就会被立即执行，所以打印async1 start；
然后进入async2（），打印async2；
await执行完后把async1 end放入了微任务队列；
接着执行到new Promise，Promise一旦被定义就会被立即执行，所以打印promise1；
Promise.then是异步执行，被推入到微任务队列；
然后打印script end；
执行异步任务中的微任务队列，打印async1 end ；然后打印promise2；
最后执行宏任务，打印setTimeout。

注意点

对于async1函数可以换一种写法：

async function async1(){
	console.log('async1 start');
	async2().then(()=>{
		console.log('async1 end')
	})
}

对于上面的分析都是学习之后自己的理解，如果有问题请指正~