事件循环相关-异步输出顺序问题

题目出处

通过这个题目 大概搞懂了 async/await 的实际意义
也可以复习下事件循环机制

async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");  // 相当于async2这个promise对象的一个 .then()
}

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

console.log("script start");  

setTimeout(function () {
    console.log("settimeout");
},0);

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 ”
 *  
 *  * setTimeout() 进入异步队列 *
 * 
 * 2. async1()  
 *      -> 输出 “ async1 start ” 
 *      -> 进入 async2() 输出 “ async2 ”
 *      -> await等待async2()函数返回一个promise实例 将 console.log('async1 end') 放入异步队列
 * 
 * 3. promise()
 *      -> 输出 “ promise1 ” 
 *      -> resolve() 进入异步队列
 * 
 * 4. console.log("script end")   -> 输出 “ script end ”
 * 
 * 
 * 异步队列：
 * setTimeout()               
 * console.log('async1 end')  
 * resolve()                  
 * 
 * 按宏 / 微任务 顺序输出
 * console.log('async1 end')  // 微任务 1  ->   async1 end
 * resolve()                  // 微任务 2  ->  promise2
 * setTimeout()               // 宏任务 1  ->   settimeout
 * 
*/

async / await

通过看起来是同步的代码来执行 async(异步) 操作。
await阻塞功能，相当于一个 .then()的功能，await后一般是跟的异步操作，加上之后 只有等他执行完之后，后面的代码才能进行
本质还是promise 属于微任务

async function asyncFunc() {
    const result = await otherAsyncFunc();
    console.log(result);
}
 
// 等价于:
function asyncFunc() {
    return otherAsyncFunc().then(result => {
        console.log(result);
    });
}

事件循环机制 (EventLoop)

JavaScript是单线程的 ( 所有在主线程执行 )
事件轮询机制：同步任务完成后，执行异步队列

单线程特点:

1. 代码从上至下以此执行
2. 同步（ 会阻塞后面代码的执行 ） & 异步 ( 主线程同步任务之后触发执行 )
3. 同步代表：alert() console.log() 赋值语句
4. 异步代表：定时器 事件的回调( xx.onclick=function(){} ) promise

事件循环:

1. 所有同步任务都在主线程上执行，形成一个执行栈
2. 主线程之外，还存在一个”消息队列”。只要异步操作执行完成，就到消息队列中排队
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取消息队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
4. 主线程不断重复上面的第三步

宏任务和微任务

微任务和宏任务皆为异步任务，但是微任务的优先级高于宏任务。