事件循环是什么

JS是单线程的，意味着同一时间只能做一件事，但是并不意味着阻塞，实现单线程非阻塞的方法就是 事件循环。

await相当于promise.then 可看作微任务

---

一、在JavaScript中，所有的任务都可以分为：

同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

按照这个流程，它的执行机制是：

同步任务进入主线程，异步任务进入任务队列，主线程的内容执行完毕，回去任务队列读取对应	
的任务，推入主线程。上述过程的不断重复就是事件循环。

---

二、如果将任务划分为同步任务和异步任务并不是那么的准确，原因在于异步任务还可以细分为微任务与宏任务：

微任务：执行时机在主任务结束之后，当前宏任务结束之前
	Promise.then
	Process.nextTick
	await
宏任务：
	script (可以理解为外层同步代码)
	setTimeout/setInterval
	UI rendering/UI事件
	postMessage、MessageChannel
	setImmediate、I/O（Node.js）

按照这个流程，它的执行机制是：

执行一个宏任务，如果遇到微任务就将它放到微任务的事件队列中；
当前宏任务执行完成后，会查看微任务的事件队列，然后将里面的所有微任务依次执行完。

---

console.log(1)
setTimeout(()=>{
    console.log(2)
}, 0)
new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})
console.log(3)

流程如下：

// 遇到 console.log(1) ，直接打印 1
// 遇到定时器，属于新的宏任务，留着后面执行
// 遇到 new Promise，这个是直接执行的，打印 'new Promise'
// .then 属于微任务，放入微任务队列，后面再执行
// 遇到 console.log(3) 直接打印 3
// 好了本轮宏任务执行完毕，现在去微任务列表查看是否有微任务，发现 .then 的回调，执行它，打印 'then'
// 当一次宏任务执行完，再去执行新的宏任务，这里就剩一个定时器的宏任务了，执行它，打印 2

---

三、async和await
async函数返回一个promise对象，下面两种方法是等效的：

function f() {
    return Promise.resolve('TEST');
}
async function asyncF() {
    return 'TEST';
}

await命令后面是一个promise对象，返回该对象的结果，如果不是promise对象，就直接返回对应的值：

async function f(){
    // 等同于
    // return 123
    return await 123
}
f().then(v => console.log(v)) // 123

不管await后面跟着的是什么，await都会阻塞后面的代码：

async function fn1 (){
    console.log(1)
    await fn2()
    console.log(2) // 阻塞
}
async function fn2 (){
    console.log('fn2')
}
fn1()
console.log(3)

下面的例子中，await 会阻塞下面的代码（即加入微任务队列），先执行 async外面的同步代
码，同步代码执行完，再回到 async 函数中，再执行之前阻塞的代码
所以上述输出结果为：1，fn2，3，2

---

四、流程分析：

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')
})
async1()
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
console.log('script end')

分析过程：

1.执行整段代码，遇到 console.log('script start') 直接打印结果，输出 script start
2.遇到定时器了，它是宏任务，先放着不执行
3.遇到 async1()，执行 async1 函数，先打印 async1 start，下面遇到await怎么办？先执行 async2，打印 async2，然后阻塞下面代码（即加入微任务列表），跳出去执行同步代码
4.跳到 new Promise 这里，直接执行，打印 promise1，下面遇到 .then()，它是微任务，放到微任务列表等待执行
5.最后一行直接打印 script end，现在同步代码执行完了，开始执行微任务，即 await下面的代码，打印 async1 end
6.继续执行下一个微任务，即执行 then 的回调，打印 promise2
7.上一个宏任务所有事都做完了，开始下一个宏任务，就是定时器，打印 settimeout

所以最后的结果是：script start、async1 start、async2、promise1、script end、
async1 end、promise2、settimeout