摘要：版本以及之前，本身還沒有異步執(zhí)行代碼的能力，宿主環(huán)境傳遞給引擎，然后按順序執(zhí)行，由宿主發(fā)起任務(wù)。采納引擎術(shù)語，把宿主發(fā)起的任務(wù)稱為宏觀任務(wù)，把引擎發(fā)起的任務(wù)稱為微觀任務(wù)。基本用法示例的回調(diào)是一個(gè)異步的執(zhí)行過程。

重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，郵箱：[email protected]。

一個(gè) JavaScript 引擎會(huì)常駐于內(nèi)存中，它等待著 宿主 把 JavaScript 代碼或者函數(shù)傳遞給它執(zhí)行。

1、ES3版本以及之前，JavaScript 本身還沒有異步執(zhí)行代碼的能力，宿主環(huán)境傳遞給 JavaScript 引擎，然后按順序執(zhí)行，由宿主發(fā)起任務(wù)。

2、ES5之后，JavaScript 引入了 Promise，不需要瀏覽器的安排，JavaScript 引擎本身也可以發(fā)起任務(wù)。

3、采納JSC引擎術(shù)語，把宿主發(fā)起的任務(wù)稱為宏觀任務(wù)，把JavaScript引擎發(fā)起的任務(wù)稱為微觀任務(wù)。

JavaScript 引擎等待宿主環(huán)境分配宏觀任務(wù)，在 Node 術(shù)語中，把這個(gè)部分稱為事件循環(huán)。

1、用偽代碼來表示：跑在獨(dú)立線程中的循環(huán)

while(TRUE) {
    r = wait();
    execute(r);
}

2、整個(gè)循環(huán)做的事情基本上就是反復(fù) 等待 - 執(zhí)行，這里的執(zhí)行過程，其實(shí)都是一個(gè)宏觀任務(wù)?？梢源笾吕斫鉃椋汉暧^任務(wù)的隊(duì)列就相當(dāng)于時(shí)間循環(huán)。

3、在宏觀任務(wù)中，JavaScript 的 Promise 還會(huì)產(chǎn)生異步代碼，JavaScript 必須保證這些異步代碼在一個(gè)宏觀任務(wù)中完成，因此，每個(gè)宏觀任務(wù)中又包含了一個(gè)微觀任務(wù)隊(duì)列：如下圖所示

例如：Promise 永遠(yuǎn)在隊(duì)列尾部添加微觀任務(wù)。setTimeout 等宿主 API，則會(huì)添加宏觀任務(wù)。

JavaScript 語言提供的一種標(biāo)準(zhǔn)化的異步管理方式，當(dāng)進(jìn)行 io、等待或者其它異步操作的函數(shù)，不返回真實(shí)結(jié)果，而返回一個(gè)承諾，函數(shù)的調(diào)用方可以在合適的時(shí)機(jī)，選擇等待這個(gè)承諾兌現(xiàn)。

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            setTimeout(resolve,duration);
        })
    }
    sleep(1000).then( ()=> console.log("finished"));

Promise 的 then 回調(diào)是一個(gè)異步的執(zhí)行過程。

    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });
    r.then(() => console.log("c"));
    console.log("b")

    // 輸出順序：a  b  c

    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });
    setTimeout(()=>console.log("d"), 0)
    r.then(() => console.log("c"));
    console.log("b")

    // 輸出順序：a  b  c  d

Promise 產(chǎn)生的是 JavaScript 引擎內(nèi)部的微任務(wù)，而 setTimeout 是瀏覽器 API，它產(chǎn)生宏任務(wù)。所以d 必定在 c 之后輸出。

    setTimeout(()=>console.log("d"), 0)
    var r = new Promise(function(resolve, reject){
        resolve()
    });
    r.then(() => {
        var begin = Date.now();
        while(Date.now() - begin < 1000);
        console.log("c1")
        new Promise(function(resolve, reject){
            resolve()
        }).then(() => console.log("c2"))
    });

    // 輸出順序：c1  c2  d

這個(gè)例子很好的解釋了微任務(wù)優(yōu)先的原理。

1、首先我們分析有多少個(gè)宏任務(wù)

2、在每個(gè)宏任務(wù)中，分析有多少個(gè)微任務(wù)

3、根據(jù)調(diào)用次序，確定宏任務(wù)中的微任務(wù)執(zhí)行次序

4、根據(jù)宏任務(wù)的觸發(fā)規(guī)則和調(diào)用次序，確定宏任務(wù)的執(zhí)行次序

5、確定整個(gè)順序

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            console.log("b");
            setTimeout(resolve,duration);
        })
    }
    console.log("a");
    sleep(5000).then(()=>console.log("c"));

    // 輸出順序：a  b  c（c要等5秒）

第一個(gè)宏觀任務(wù)中，包含了先后同步執(zhí)行的 console.log("a"); 和 console.log("b");。

setTimeout 后，第二個(gè)宏觀任務(wù)執(zhí)行調(diào)用了 resolve，然后 then 中的代碼異步得到執(zhí)行，調(diào)用了 console.log("c")。

async/await 是 ES2016 新加入的特性，它提供了用 for、if 等代碼結(jié)構(gòu)來編寫異步的方式，并且運(yùn)行時(shí)基礎(chǔ)是 Promise。

1、async 函數(shù)是在 function 關(guān)鍵字之前加上 async 關(guān)鍵字，這樣就定義了一個(gè) async 函數(shù)，可以在其中使用 await 來等待一個(gè) Promise。

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function foo(){
    console.log("a")
    await sleep(2000)
    console.log("b")
}

foo();

// 輸出順序：a  b（b要等兩秒）

2、async 嵌套

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function foo(name){
    await sleep(2000)
    console.log(name)
}
async function foo2(){
    await foo("a");
    await foo("b");
}

foo2();

// 輸出順序：a（a等兩秒） b（b也等兩秒）

看完這篇確實(shí)幫我解決了之前困擾我的問題，贊一個(gè)。。。明天也要加油鴨。。。。