Javascript 異步編程-基礎篇

在前端這個領域裏面，ajax請求很是常見，相信每個前端er都寫過下面的代碼：

// 前提引入jquery

$.ajax({
    type: 'get',
    url: '/path/to/data',
    success: function (response) {
    
    },
    error: function (errMsg) {

    }
})

上面這段代碼中的success和error被稱爲回調函數。基於js異步IO的特色，代碼的意思就是在ajax請求成功以後，執行success函數，而在ajax失敗時，執行error函數。

然而在有些狀況下，業務邏輯可能須要咱們產生多個success狀態下的回調函數，或者多個ajax請求同時發送，所有success狀態後執行回調，這樣的方法就顯得有些捉襟見肘。

1. 單次ajax請求有多個回調響應

// 使用上面的方法，有以下兩種業務邏輯

$.ajax({
    type: 'get',
    url: '/path/to/data',
    success: function (response) {
        // todo
        
        successCallback2(response);
        successCallback3(response);
    }
})

繼續使用上面的寫法，就會讓回調進行嵌套，若是須要在successCallback2完成後繼續回調，就要一層一層的嵌套。代碼不是縱向發展，而是橫向發展，這就是js中的回調地獄。

2. 多個ajax請求但願有一個共同的回調響應

// 繼續使用最初的方法，假設有多個ajax請求，但願在所有完成後執行回調函數。

function fetchData (url, successCb, errorCb) {
    return function () {
        $.ajax({
            type: 'get',
            url: url,
            success: successCb,
            error: errorCb
        });
    }
}

function successCb () {
    console.log('success');
}

function errorCb () {
    console.log('error');
}

var fetchData1 = fetchData('/path/to/data1', successCb, errorCb);
var fetchData2 = fetchData('/path/to/data2', successCb, errorCb);

若是有兩個相同的fetch data的操做，若是咱們但願可以並行操做的話，只能重寫fetchData1

var fetchData1 = fetchData('/path/to/data1', fetchData2, errorCb);

fetchData1();

這種寫法其實是在fetchData1成功後進行fetchData2操做的，並非嚴格意義上的並行操做，以後在fetchData2的success狀態的回調中，咱們能夠得到兩次ajax請求的返回值。

這樣的代碼是不完美的，在現在你們都在追求webpack+es6+babel的技術棧時，也應該想一想，如何從最基本的代碼中提高生產力和代碼的可維護性。

在發現了代碼在業務中的痛點以後，就要想辦法去解決它。好在現在前端百花齊放，這樣的問題早已有多種成熟的解決方案，接下來的幾篇文章，就由淺入深詳細的講講這些異步方案中的實現方法和代碼原理，而且每一種方法本人都實現了一個tiny版。全部文章代碼都開源在github上，若是有任何問題或者建議甚至是錯誤，均可以在github中提issue給我。歡迎你們熱烈討論。

下一篇開始，着重介紹具體從Deferred對象解決上述兩種問題，有興趣的同窗繼續看下去吧。Javascript異步編程-延遲對象篇