JS異步事件順序：setTimeout,async,promise

為什么最近更新那么頻繁，還不是因為筆試的時候瞎了？

先說異步事件執行順序的規則：

1. 定時器異步隊列和promise隊列不是同一隊列，promise優先級高於setTimeout;

2. 創建promise對象里面的代碼屬於同步代碼，其異步性體現在then和catch處；

3. 遇到await，先執行完await所在行的事件（阻塞到執行完成），然后讓出當前線程，繼續走同步事件，await后面的語句等同於Promise.resolve()，進入promise的異步隊列排隊。

好了，理解這些就能做題了

async function async1() {
    console.log("async1 start");      //2  同步事件
    await  async2();                  //3  執行完后繼續走同步事件
    console.log("async1 end");        //6  await之后的代碼 首選進入promise異步隊列
}
async  function async2() {
    console.log( 'async2');           //3
}

console.log("script start");          // 1  同步事件！
setTimeout(function () {
    console.log("settimeout");        //8  最后，定時器的異步走最后！！！
},0);
async1();                             //2  走異步函數內部的同步事件
new Promise(function (resolve) {
    console.log("promise1");          //4  同步事件！
    resolve();
}).then(function () {
    console.log("promise2");          //7  最后進入promise異步隊列
});
console.log('script end');            //5  同步事件！        

加了備注了，但還是上結果吧

 

注意：await只能存在與 async 定義的函數內部， 遇到await 之后，代碼就暫停執行了，必須等await代碼執行完成后，才能進入下一步，下一步仍是先走同步代碼。 

懂了么？如果對 async 還迷糊，那就做以下測試！

上代碼認識一下async

async function timeout() {
    console.log('hello world');     //類似於創建promise對象時的同步代碼
    return '我屬於promise對象'       //這才是promise對象返回的resolve對象
}
timeout().then((result)=>{
    console.log(result)
})
console.log('雖然在后面，但是我先執行');     //同步事件

輸出結果：

 

 所以：async所定義的異步函數，其返回值是promise對象 

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        return 'my god, failure'
    }
}
console.log(timeout(true))  // 調用Promise.resolve() 返回promise 對象。
console.log(timeout(false)); // 調用Promise.reject() 返回promise 對象。