我终于搞懂了async/await、promise和setTimeout的执行顺序

前言

今天看到一道面试题，是关于async/await、promise和setTimeout的执行顺序，题目如下：

async function async1() {
	console.log('async1 start');
	await async2();
	console.log('asnyc1 end');
}

async function async2() {
	console.log('async2');
}

console.log('script start');

setTimeout(() => {
	console.log('setTimeOut');
}, 0);

async1();

new Promise(function (reslove) {
	console.log('promise1');
	reslove();
}).then(function () {
	console.log('promise2');
})

console.log('script end');

我给出的答案：

script start
async1 start
async2
asnyc1 end  // x
promise1
script end
promise2
setTimeOut

正确答案：

script start
async1 start
async2
promise1
script end
asnyc1 end
promise2
setTimeOut

为什么promise1比asnyc1 end先出来呢？带着这个疑问，我去了解了一下js事件循环机制。

js事件循环机制(JavaScript EventLoop)

JavaScript 是单线程语言

为什么js要用单线程模式, 而不用多线程模式?
JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。

因是单线程语言执行时遇到耗时间的操作时比如settimeout就会进行阻塞，所以js利用各种手段将js划分为同步和异步说法

• 同步：做饭、吃饭、洗衣服这些事情只能一件件去做
• 异步：做饭、吃饭并且把衣服放在洗衣机洗，可以达到边吃饭边洗

然而异步任务又划分为宏任务和微任务，每一个任务又称为事件，在这些事件执行时会形成循环状态即为事件循环

JavaScript的事件分两种:

宏任务(macro-task)	微任务(micro-task)
script	promise.[ then/catch/finally ]((非new Promise))
setTimeout	process.nextTick(Node.js 环境)
setInterval	MutaionOberver（浏览器环境）
setImmediate(Node.js 环境)	Object.observe
IO操作	-
UI交互事件	-
postMessage	-
MessageChannel	-

事件的执行顺序，是先执行整体script代码是宏任务（可以理解为一开始执行的是宏任务 然后有微任务都执行微任务），然后执行微任务，这个是基础。

任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table（事件列表）并注册函数，异步事件完成后，会将回调函数放入Event Queue（事件队列）中(宏任务和微任务是不同的Event Queue)。

同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。

注意：
setTimeout并不是直接的把你的回掉函数放进上述的异步队列中去，而是在定时器的时间到了之后，把回掉函数放到执行异步队列中去。如果此时这个队列已经有很多任务了，那就排在他们的后面。这也就解释了为什么setTimeout为什么不能精准的执行的问题了。

setTimeout执行需要满足两个条件：

1. 主线程必须是空闲的状态，如果到时间了，主线程不空闲也不会执行你的回调函数
2. 这个回调函数需要等到插入异步队列时前面的异步函数都执行完了，才会执行

promise、async/await

首先，new Promise()是同步的任务，会被放到主线程中去立即执行。而.then()函数是异步任务会放到异步队列中去，那什么时候放到异步队列中去呢？当你的promise状态结束的时候，就会立即放进异步队列中去了。

带async关键字的函数会返回一个promise对象，如果里面没有await，执行起来等同于普通函数；如果没有await，async函数并没有很厉害是不是。

await关键字要在 async关键字函数的内部，await 写在外面会报错；await如同他的语意，就是在等待，等待右侧的表达式完成。此时的await会让出线程，阻塞async内后续的代码，先去执行async外的代码。等外面的同步代码执行完毕，才会执行里面的后续代码。就算await的不是promise对象，是一个同步函数，也会等这样操作。

流程梳理

我们整体再梳理一下上面代码执行的流程：

1. 整个代码片段（script）作为一个宏任务执行console.log('script start')，输出script start；
2. 执行setTimeout，是一个异步任务，放入宏任务异步队列中；
3. 执行async1()，输出async1 start，继续向下执行；
4. 执行async2()，输出async2，并返回了一个promise对象，await让出了线程，因为在await下面的代码需要等待await右边的代码执行完，所以把await下面的代码加入了微任务异步队列;
5. 执行 new Promise()，输出promise1，然后将resolve()放入微任务异步队列；
6. 执行console.log('script end')，输出script end；
7. 到此同步的代码就都执行完成了，然后去微任务异步队列里去获取任务
8. 接下来执行await async2()下面的代码，输出了async1 end；
9. 然后执行resolve（new Promise的），输出了promise2；
10. 最后执行setTimeout，输出了settimeout。

在第4步中， await这里有一个机制， 就是 await的等待， 不会阻塞外部函数的执行， 而 await等待的 如果是一个 new Promise()则 new Promise()里面的代码还是同步执行， 如果不是 new Promise()，就会使用 Promise.resolve 来进行封装。
这里的 async2是一个 async 方法， 里面的打印会同步执行， 而 await async2()后面的代码会放到微任务队列中根据队列先进先出的原则进行依次触发。

所以我知道了script end为什么会优先于async1 end输出。

到这里就结束了，后续还会更新 前端 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！

推荐文章

JS: 一战吃透Promise精修版
这一次，彻底弄懂 JavaScript 执行机制