事件循环（EvenLoop）之promise、async和await之执行顺序的那点事

一、事件循环

JavaScript本身是单线程，也就是同一时刻只能干一件事，
JS任务包含了同步任务和异步任务，
遇到执行函数会将其放入调用栈(先进后出)中，
遇到setTimeout/setInterval等异步任务时，会把它放入到消息队列中，
等主线程的任务执行完成以后，
再回过头执行消息队列中的异步任务，
如果异步任务中仍然有异步任务，会继续放入消息队列，
以此类推，便形成了一个事件循环。

主任务：执行代码解析
任务队列：存储所以已经完成的任务回调（先微后宏）
宏任务：整体代码 setTimeout setInterval
微任务：promise
事件表格：挂起状态

含义

1.同步和异步进行不同的执行场所，同步进入主线程，异步进入事件表格event table并注册函数
2.当指定的任务完成之后，event table 会将这个函数移入event queue 事件队列（事件队列/任务队列/消息线程中）
3.主线程内的任务执行完毕为空的时候，会去事件队列 event queue中读取对应的函数进入主线程执行
4.上述过程不断的重复，就是我们常说的event loop事件循环

一、promise、async和await之执行顺序的那点事

代码

async

async function 声明将定义一个返回 AsyncFunction 对象的异步函数。
当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值 ；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。所以你现在知道咯，使用 async 定义的函数，当它被调用时，它返回的其实是一个Promise对象。

await

语法：[return_value] = await expression;
表达式（express）：一个 Promise 对象或者任何要等待的值。
返回值（return_value）：返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。
当await操作符后面的表达式是一个Promise的时候，它的返回值，实际上就是Promise的回调函数resolve的参数。

async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待表达式中的 Promise 解析完成后继续执行 async 函数并返回解决结果。

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句

//同步代码执行完后执行顺序

//就是前面 async1 放进去的Promise，执行Promise时发现又遇到了他的真命天子resolve函数，
//划重点：这个resolve又会被放入任务队列继续等待，（ await async2()是resolve的参数）

//然后再次跳出 async1函数 继续下一个任务。
//接下来取到的下一个任务，就是前面 new Promise 放进去的 resolve回调 啦 
//yohoo～这个resolve被放到调用栈执行，并输出“promise2”，然后继续取下一个任务。

//后面的事情相信你已经猜到了，没错调用栈再次空出来了，事件循环就取到了下一个任务：
//历经千辛万苦终于轮到的那个Promise的resolve回调！！！执行它
//（啥也不会打印的，因为 async2 并没有return东西，所以这个resolve的参数是undefined）
//此时 await 定义的这个 Promise 已经执行完并且返回了结果所
//以可以继续往下执行 async1函数 后面的任务了，那就是“console.log('async1 end')”。

            async function async1() {
                console.log('async1 start')    //2
                await async2()   //执行完成之后让出了线程（跳出async函数体）
                console.log('async1 end')     //7
            }
            //此时返回的Promise会被放入到回调队列中等待，
            //await会让出线程（js是单线程还用我介绍吗），
            //接下来就会跳出 async1函数 继续往下执行。
            async function async2() {
                console.log('async2')         //3
            }
            console.log('script start')       //1
            setTimeout(function () {
                console.log('setTimeout')     //8
            }, 0)
            async1()
            new Promise(function (resolve) {
                console.log('promise1')      //4
                resolve()
            }).then(function () {
                console.log('promise2')      //6
            })
            console.log('script end')        //5

执行结果

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

链接: https://segmentfault.com/a/1190000015057278.
链接: https://zhuanlan.zhihu.com/p/145383822.