从一道题目出发

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

asyncfunctionasync1() {
	console.log('async1 start');
	awaitasync2();
	console.log('asnyc1 end');
}
asyncfunctionasync2() {
	console.log('async2');
}
console.log('script start');
setTimeout(() => {
	console.log('setTimeOut');
}, 0);
async1();
newPromise(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 EventLoop 事件循环机制

JavaScript的事件分两种:

事件的执行顺序是先执行宏任务然后执行微任务这个是基础任务可以有同步任务和异步任务同步的进入主线程异步的进入Event Table并注册函数异步事件完成后会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)同步任务执行完成后会从Event Queue中读取事件放入主线程执行回调函数中可能还会包含不同的任务因此会循环执行上述操作。

注意 setTimeOut并不是直接的把你的回掉函数放进上述的异步队列中去而是在定时器的时间到了之后把回掉函数放到执行异步队列中去。如果此时这个队列已经有很多任务了那就排在他们的后面。这也就解释了为什么setTimeOut为什么不能精准的执行的问题了。setTimeOut执行需要满足两个条件
主进程必须是空闲的状态如果到时间了主进程不空闲也不会执行你的回调函数
这个回调函数需要等到插入异步队列时前面的异步函数都执行完了才会执行

promise、async/await

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

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

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

流程梳理

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

整个代码片段script作为一个宏任务执行console.log('script start')输出script start
执行setTimeout是一个异步动作放入宏任务异步队列中
执行async1()输出async1 start继续向下执行
执行async2()输出async2并返回了一个promise对象await让出了线程把返回的promise加入了微任务异步队列所以async1()下面的代码也要等待上面完成后继续执行;
执行 new Promise输出promise1然后将resolve()放入微任务异步队列
执行console.log('script end')输出script end
到此同步的代码就都执行完成了然后去微任务异步队列里去获取任务
接下来执行resolveasync2返回的promise返回的输出了async1 end
然后执行resolvenew Promise的输出了promise2
最后执行setTimeout输出了settimeout。

在第4步中 await 这里有一个机制 就是 await 的等待 不会阻塞外部函数的执行 而 await 等待的 如果是一个 Promise 则 Promise 里面的代码还是同步执行 如果不是 Promise 就会使用 Promise.resolve 来进行封装 这里的 async2 是一个 async 方法 里面的 打印会同步执行 而 await async2() 后面的代码 会放到微任务队列中的第一个位置等待外部同步代码执行完毕以后再执行。

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

大厂面试题分享 面试题库

前端面试题库 面试必备 推荐★★★★★

地址前端面试题库