【面试题】async await、promise和setTimeout的执行顺序_前端promise settime执行顺序题

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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的事件分两种:





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



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



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


#### promise、async/await


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


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


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


#### 流程梳理


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



> 
>  整个代码片段（script）作为一个宏任务执行console.log('script start')，输出script start； 
>    
> 执行setTimeout，是一个异步动作，放入宏任务异步队列中； 
>    


### 总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://i-blog.csdnimg.cn/blog_migrate/f3ce8fafe1688e41082c10f305d37ee9.png)

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://i-blog.csdnimg.cn/blog_migrate/9333c53eb6614b71529e6701dcecabad.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://i-blog.csdnimg.cn/blog_migrate/70dfaeb0ce6cf4b3ad6284d4683da4ec.png)