在 JavaScript 的世界中，所有代碼都是單線程執(zhí)行的，由于這個(gè)“缺陷”，導(dǎo)致 JavaScript 的所有網(wǎng)絡(luò)操作，瀏覽器事件，都必須是異步執(zhí)行。

異步執(zhí)行可以用回調(diào)函數(shù)實(shí)現(xiàn)。

異步操作會(huì)在將來(lái)的某個(gè)時(shí)間點(diǎn)觸發(fā)一個(gè)函數(shù)調(diào)用。

主流的異步處理方案主要有：回調(diào)函數(shù) (CallBack) 、 Promise 、 Generator 函數(shù)、 async/await 。

[[201412]]

一、回調(diào)函數(shù)(CallBack)

這是異步編程最基本的方法

假設(shè)我們有一個(gè) getData 方法，用于異步獲取數(shù)據(jù)，***個(gè)參數(shù)為請(qǐng)求的 url 地址，第二個(gè)參數(shù)是回調(diào)函數(shù)，如下：

function getData(url, callBack){ 
    // 模擬發(fā)送網(wǎng)絡(luò)請(qǐng)求 
    setTimeout(()=> { 
        // 假設(shè) res 就是返回的數(shù)據(jù) 
        var res = { 
            url: url, 
            data: Math.random() 
        } 
        // 執(zhí)行回調(diào)，將數(shù)據(jù)作為參數(shù)傳遞 
        callBack(res) 
    }, 1000) 
} 

我們預(yù)先設(shè)定一個(gè)場(chǎng)景，假設(shè)我們要請(qǐng)求三次服務(wù)器，每一次的請(qǐng)求依賴上一次請(qǐng)求的結(jié)果，如下：

getData('/page/1?param=123', (res1) => { 
    console.log(res1) 
    getData(`/page/2?param=${res1.data}`, (res2) => { 
        console.log(res2) 
        getData(`/page/3?param=${res2.data}`, (res3) => { 
            console.log(res3) 
        }) 
    }) 
}) 

• 通過(guò)上面的代碼可以看出，***次請(qǐng)求的 url 地址為： /page/1?param=123 ，返回結(jié)果為 res1 。
• 第二個(gè)請(qǐng)求的 url 地址為： /page/2?param=${res1.data} ，依賴***次請(qǐng)求的 res1.data ，返回結(jié)果為 res2`。
• 第三次請(qǐng)求的 url 地址為： /page/3?param=${res2.data} ，依賴第二次請(qǐng)求的 res2.data ，返回結(jié)果為 res3 。

由于后續(xù)請(qǐng)求依賴前一個(gè)請(qǐng)求的結(jié)果，所以我們只能把下一次請(qǐng)求寫(xiě)到上一次請(qǐng)求的回調(diào)函數(shù)內(nèi)部，這樣就形成了常說(shuō)的：回調(diào)地獄。

二、發(fā)布/訂閱

我們假定，存在一個(gè)”信號(hào)中心”，某個(gè)任務(wù)執(zhí)行完成，就向信號(hào)中心”發(fā)布”( publish )一個(gè)信號(hào)，其他任務(wù)可以向信號(hào)中心”訂閱”( subscribe )這個(gè)信號(hào)，從而知道什么時(shí)候自己可以開(kāi)始執(zhí)行。這就叫做”發(fā)布/訂閱模式”(publish-subscribe pattern)，又稱”觀察者模式”(observer pattern)

這個(gè)模式有多種實(shí)現(xiàn)，下面采用的是Ben Alman的 Tiny Pub/Sub ，這是 jQuery 的一個(gè)插件

首先， f2 向”信號(hào)中心” jQuery 訂閱” done “信號(hào)

jQuery.subscribe("done", f2); 

f1進(jìn)行如下改寫(xiě)

function f1(){ 
　　　　setTimeout(function(){ 
　　　　　　// f1的任務(wù)代碼 
　　　　　　jQuery.publish("done"); 
　　　　}, 1000); 
} 

jQuery.publish("done") 的意思是， f1 執(zhí)行完成后，向”信號(hào)中心 "jQuery 發(fā)布 "done" 信號(hào)，從而引發(fā)f2的執(zhí)行。 此外，f2完成執(zhí)行后，也可以取消訂閱( unsubscribe )

jQuery.unsubscribe("done", f2); 

這種方法的性質(zhì)與”事件監(jiān)聽(tīng)”類似，但是明顯優(yōu)于后者。因?yàn)槲覀兛梢酝ㄟ^(guò)查看”消息中心”，了解存在多少信號(hào)、每個(gè)信號(hào)有多少訂閱者，從而監(jiān)控程序的運(yùn)行。

三、Promise

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大

所謂 Promise ，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語(yǔ)法上說(shuō)， Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。 Promise 提供統(tǒng)一的 API ，各種異步操作都可以用同樣的方法進(jìn)行處理

簡(jiǎn)單說(shuō)，它的思想是，每一個(gè)異步任務(wù)返回一個(gè) Promise 對(duì)象，該對(duì)象有一個(gè) then 方法，允許指定回調(diào)函數(shù)。

現(xiàn)在我們使用 Promise 重新實(shí)現(xiàn)上面的案例，首先，我們要把異步請(qǐng)求數(shù)據(jù)的方法封裝成 Promise

function getDataAsync(url){ 
    return new Promise((resolve, reject) => { 
        setTimeout(()=> { 
            var res = { 
                url: url, 
                data: Math.random() 
            } 
            resolve(res) 
        }, 1000) 
    }) 
} 

那么請(qǐng)求的代碼應(yīng)該這樣寫(xiě)

getDataAsync('/page/1?param=123') 
    .then(res1=> { 
        console.log(res1) 
        return getDataAsync(`/page/2?param=${res1.data}`) 
    }) 
    .then(res2=> { 
        console.log(res2) 
        return getDataAsync(`/page/3?param=${res2.data}`) 
    }) 
    .then(res3=> { 
        console.log(res3) 
    }) 

then 方法返回一個(gè)新的 Promise 對(duì)象， then 方法的鏈?zhǔn)秸{(diào)用避免了 CallBack 回調(diào)地獄

但也并不是***，比如我們要添加很多 then 語(yǔ)句， 每一個(gè) then 還是要寫(xiě)一個(gè)回調(diào)。

如果場(chǎng)景再?gòu)?fù)雜一點(diǎn)，比如后邊的每一個(gè)請(qǐng)求依賴前面所有請(qǐng)求的結(jié)果，而不僅僅依賴上一次請(qǐng)求的結(jié)果，那會(huì)更復(fù)雜。 為了做的更好， async/await 就應(yīng)運(yùn)而生了，來(lái)看看使用 async/await 要如何實(shí)現(xiàn)

四、async/await

getDataAsync 方法不變，如下

 function getDataAsync(url){ 
    return new Promise((resolve, reject) => { 
        setTimeout(()=> { 
            var res = { 
                url: url, 
                data: Math.random() 
            } 
            resolve(res) 
        }, 1000) 
    }) 
} 

業(yè)務(wù)代碼如下

async function getData(){ 
    var res1 = await getDataAsync('/page/1?param=123') 
    console.log(res1) 
    var res2 = await getDataAsync(`/page/2?param=${res1.data}`) 
    console.log(res2) 
    var res3 = await getDataAsync(`/page/2?param=${res2.data}`) 
    console.log(res3) 
} 

可以看到使用 async\await 就像寫(xiě)同步代碼一樣

對(duì)比 Promise 感覺(jué)怎么樣?是不是非常清晰，但是 async/await 是基于 Promise 的，因?yàn)槭褂?async 修飾的方法最終返回一個(gè) Promise ， 實(shí)際上， async/await 可以看做是使用 Generator 函數(shù)處理異步的語(yǔ)法糖，我們來(lái)看看如何使用 Generator 函數(shù)處理異步

五、Generator

首先異步函數(shù)依然是

function getDataAsync(url){ 
    return new Promise((resolve, reject) => { 
        setTimeout(()=> { 
            var res = { 
                url: url, 
                data: Math.random() 
            } 
            resolve(res) 
        }, 1000) 
    }) 
} 

使用 Generator 函數(shù)可以這樣寫(xiě)

function*getData(){ 
    var res1 = yield getDataAsync('/page/1?param=123') 
    console.log(res1) 
    var res2 = yield getDataAsync(`/page/2?param=${res1.data}`) 
    console.log(res2) 
    var res3 = yield getDataAsync(`/page/2?param=${res2.data}`) 
    console.log(res3)) 
} 

然后我們這樣逐步執(zhí)行

var g = getData() 
g.next().value.then(res1=> { 
    g.next(res1).value.then(res2=> { 
        g.next(res2).value.then(()=> { 
            g.next() 
        }) 
    }) 
}) 

上面的代碼，我們逐步調(diào)用遍歷器的 next() 方法，由于每一個(gè) next() 方法返回值的 value 屬性為一個(gè) Promise 對(duì)象

所以我們?yōu)槠涮砑?then 方法， 在 then 方法里面接著運(yùn)行 next 方法挪移遍歷器指針，直到 Generator 函數(shù)運(yùn)行完成，實(shí)際上，這個(gè)過(guò)程我們不必手動(dòng)完成，可以封裝成一個(gè)簡(jiǎn)單的執(zhí)行器

function run(gen){ 
    var g = gen() 
 
    function next(data){ 
        var res = g.next(data) 
        if (res.done) return res.value 
        res.value.then((data) => { 
            next(data) 
        }) 
    } 
 
    next() 
 
} 

run 方法用來(lái)自動(dòng)運(yùn)行異步的 Generator 函數(shù)，其實(shí)就是一個(gè)遞歸的過(guò)程調(diào)用的過(guò)程。這樣我們就不必手動(dòng)執(zhí)行 Generator 函數(shù)了。 有了 run 方法，我們只需要這樣運(yùn)行 getData 方法

run(getData) 

這樣，我們就可以把異步操作封裝到 Generator 函數(shù)內(nèi)部，使用 run 方法作為 Generator 函數(shù)的自執(zhí)行器，來(lái)處理異步。其實(shí)我們不難發(fā)現(xiàn)， async/await 方法相比于 Generator 處理異步的方式，有很多相似的地方，只不過(guò) async/await 在語(yǔ)義化方面更加明顯，同時(shí) async/await 不需要我們手寫(xiě)執(zhí)行器，其內(nèi)部已經(jīng)幫我們封裝好了，這就是為什么說(shuō) async/await 是 Generator 函數(shù)處理異步的語(yǔ)法糖了。