異步問題

回調地獄

異步編程中最常見的一種問題便是回調地獄。

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

$.ajax({
    type: ‘get‘,
    url: ‘/path/to/calldata‘,
    success: function (response) {
        // todo
        
        sucCallback2(response);
        sucCallback3(response);
    }
})

我們產生多個success狀態下的回調函數，或者多個ajax請求同時發送，全部success狀態後執行回調。 如果需要在successCallback2完成後繼續回調，就要一層一層的嵌套。代碼不是縱向發展，而是橫向發展，這就是js中的回調地獄。

回調地獄的出現是由於異步代碼執行時間的不確定性及代碼間的依賴關系引發的

又如：

// 一個動畫結束後，執行下一個動畫，下一個動畫結束後再執行下一個動畫
$(‘#box‘).animate({width: ‘100px‘}, 1000, function(){
    $(‘#box‘).animate({height: ‘100px‘}, 1000, function(){
        $(‘#box‘).animate({left: 100}, 1000);
    });
});

把第二個動畫的執行內容放到了第一個動畫的結束事件裏，把第三個動畫放到了第二個動畫的結束事件裏，這時候如果有很多這樣的動畫，那麽就會形成回調地獄。

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

// 假設有多個ajax請求，希望在全部完成後執行回調函數。

function fetchData (url, sucCallBack, errCallBack) {
    return function () {
        $.ajax({
            type: ‘get‘,
            url: url,
            success: sucCallBack,
            error: errCallBack
        });
    }
}

function sucCallBack () {
    console.log(
 
‘success‘);
}

function errCallBack () {
    console.log(‘error‘);
}

var fetchData1 = fetchData(‘/path/to/calldata1‘, sucCallBack, errCallBack);
var fetchData2 = fetchData(‘/path/to/calldata2‘, sucCallBack, errCallBack);

如果有兩個相同的fetch data的操作，如果我們希望能夠並行操作的話，只能重寫fetchData1

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

fetchData1();

在fetchData1成功後進行fetchData2操作並不是嚴格意義上的並行操作，之後在fetchData2的success狀態的回調中，我們可以獲得兩次ajax請求的返回值。

延時對象

使用jquery 1.5版本之後的代碼，可以用下面的方法進行一次ajax請求。

// 引入jquery
var fetchData = function (url) {
    return $.ajax({
        type: ‘get‘,
        url: url
    });
}

這樣一次請求的內容就已經完成，$.ajax返回一個$.Deferred對象，那麽我們就可以使用$.Deferred對象的api進行一些異步操作。

對於每一個$.Deferred對象來說，實例有多個方法，其中done方法代表異步完成時執行的方法，fail代表異步失敗時執行的方法，這兩個方法同時仍舊返回一個$.Deferred對象的實例。

繼續上面的ajax操作，我們可以這樣寫成功和失敗的回調：

// fetchData 接上

fetchData()        //執行函數返回一個Deferred對象實例
    .done()        //接受一個函數，ajax請求成功調用
    .fail()        //接受一個函數，ajax請求失敗調用
    .done()        //第二個成功狀態的回調方法
    .fail()        //ajax請求失敗調用

同樣的對於.then方法，接受兩個函數，第一個代表成功時執行的方法，第二個代表失敗時的執行方法。同樣的，它也返回一個deferred對象實例。意味著也能進行連綴調用。

fetchData()
    .then(successFn, errorFn)        //第一次回調
    .then(successFn, errorFn)        //第二次回調
內部實現上，.done 和 .fail 都是基於 .then實現的

fetchData()                            fetchData()
    .done(successFn)    <===>            .then(successFn, null)
    .fail(errorFn)      <===>            .then(null, errorFn)

對於多個ajax同時請求，共同執行同一個回調函數這一點上，jquery有一個$.when方法，接受多個Deferred對象實例，同時執行。

var fetchData = function (url) {
    return $.ajax({
        type: ‘get‘,
        url: url
    });
}

var fetchData1 = fetchData(‘/path/to/calldata1‘);
var fetchData2 = fetchData(‘/path/to/calldata2‘);

$.when(fetchData1, fetchData2, function (data1, data2) {
    // fetchData1 響應為data1
    // fetchData2 響應為data2
})

完美。

優雅的異步代碼

那麽我們如何優雅的寫好我們的異步代碼呢？我主要列了以下5種常見方案：

1. callback

callback顧名思義便是回調，但並不是將回調內容放在異步方法裏，而是放到外部的回調函數中，比如問題1的代碼我們通過callback可以變成這樣：

$(‘#box‘).animate({width: ‘100px‘}, 1000, autoHeight);

function autoHeight() {
    $(‘#box‘).animate({height: ‘100px‘}, 1000, autoLeft);
}

function autoLeft() {
    $(‘#box‘).animate({left: 100}, 1000);
}

如此我們看似異步的代碼變成了同步的寫法，避免了層層嵌套的寫法，看上去也流暢了很多。同時使用callback也是異步編程最基礎和核心的一種解決思路。

2. Promise

基於callback，Promise目前也被廣泛運用，其是異步編程的一種解決方案，比傳統的回調函數解決方案更合理和強大。相信了解ES6的同學肯定不會陌生。

比如我們現在有這樣一個場景，我們需要異步加載一張圖片，在圖片加載成功後做一些操作，這裏我不想用回調函數或者將邏輯寫在圖片的成功事件裏，那麽用Promise我們可以這樣寫：

let p = new Promise((resolve, reject) => {
    let img = new Image(); // 創建圖片對象
    
    // 圖片加載成功事件
    img.onload = function() {
        resolve(img); // 輸出圖片對象
    };
    
    // 圖片加載失敗事件
    img.onerror = function() {
        reject(new Error(‘load error‘)); // 輸出錯誤
    };
    
    img.src = ‘xxx‘; // 圖片路徑
});

// Promise then回調
p
.then(result => {
    $(‘#box‘).append(result); // 成功後我們把圖片放到頁面上
})
.catch(error => {
    console.log(error); // 打印錯誤
})

通過Promise我們把圖片構建加載的邏輯和成功或失敗後的處理邏輯拆分了開來，將回調函數的嵌套，改成鏈式調用，同時使用Promise的catch事件回調後異常捕獲也變得十分方便。

當然如果要等待多個異步請求完成執行某些操作，可以使用Promise.all方法，如：

let p = Promise.all([p1, p2, p3]); // 其中p1、p2、p3都是Promise實例

p.then(result => console.log(result));

當然Promise也有其相應的缺點，比如下一個then回調只能獲取上一個then返回的數據，不能跨層獲取，同時大量的then回調也會使代碼不容易維護。

3. Generator

與Promise一樣，Generator 函數也是 ES6 提供的一種異步編程解決方案，其會返回一個遍歷器對象，異步任務需要暫停的地方我們可以使用yield語句，比如：

function* getData() {
    let result = yield fetch("xxx"); // 調用ajax，yield命令後面只能是 Thunk 函數或 Promise 對象
    
    console.log(result);
}

// 執行
let g = getData();
let result = g.next(); // { value: [object Promise], done: false }

result.value.then(data => {
    return data.json();
}).then(data => {
    g.next(data);
});

Generator中遇到yield的地方會進行暫停，所以我們需要手動調用next方法往下，next返回值的 value 屬性便是我們需要的數據，這裏是fetch方法返回的Promise對象，所以我們需要使用then回調，最後再調用g.next(data)結束並輸出數據。

Generator 函數的缺點在於，我們每一次執行yield語句都需要手動進行next，不是很方便。

4. co

為了解決上方Generator函數需手動執行next方法的問題，TJ Holowaychuk大神編寫了一個co函數庫，能夠使Generator 函數可以自動執行，比如原來我們需要這樣：

let files = function* (){
    var f1 = yield readFile(‘/xxx/xxx‘); // 讀取file1文件
    var f2 = yield readFile(‘/xxx/xxx‘); // 讀取file2文件
    
    console.log(f1.toString());
    console.log(f2.toString());
};

files.next(); // 執行yield
files.next(); // 執行yield
使用co後：

var co = require(‘co‘);

co(files);
co 函數返回一個 Promise 對象，因此可以用 then 方法添加回調函數。

co(files).then(() => {
  console.log(‘執行完成‘);
});

最後我們可以看到我們沒有手動執行next方法，也會打印出所讀取的文件。

co模塊雖然很好的幫助了我們解決了Generator函數必須靠執行器的問題，但是使用起來我們都需要額外引入一個模塊，那麽有沒有更加方便的方式來解決呢？繼續往下看。

5. async and await

async是 Generator 函數的語法糖，不同點在於其內置了執行器，也就是說async函數自帶執行器。看一下下面的例子：

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
    }, 1000);
});

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2); 
    }, 1000);
});

async function waitFn() {
    let a = await p1; // await命令後面可以是 Promise 對象和原始類型的值，如果使原始類型最終也會返回為Promise對象
    let b = await p2;
    
    return a + b
}

// async函數的返回值是 Promise 對象， 可以用then方法指定下一步的操作
waitFn().then(result => {
    console.log(result);  // 2s後輸出3
});

async函數內部return語句返回的值，會成為then方法回調函數的參數。因此這就像極了利用co包裹起來的Generator函數，只是把*替換成了async，把yield替換成了await。

可以說async and await 是ES7中最重要的一個特性，雖然其也存在一些弊端，但是相比較而言用其處理異步代碼來說還是比較得心應手的。

deferred對象

使用的ajax方法操作ajax請求，會受到回調函數嵌套的問題。當然，jquery團隊也發現了這個問題，在jquery 1.5版本之後，jQuery.Deferred對象為解決這類問題應運而出。之後，zapto等框架也推出相同api的deferred對象，來進行異步操作。

上面的$.ajax只是在$.deferred對象上封裝了一層ajax操作。實際上，真正的$.Deferred對象是這樣調用的：

function printA () {
    var deferred = new $.Deferred();
    setTimeout(function () {
        console.log(‘A‘);
        deferred.resolve(‘ is done.‘);
    }, 1000);
    return deferred;
}

function printB (msg) {
    var deferred = new $.Deferred();
    setTimeout(function () {
        console.log(‘B‘ + msg);
        deferred.resolve();
    }, 1000);
    return deferred;
}

printA()
    .then(printA)
    .then(printB)

每個函數維護一個Deferred對象，在每一個具有異步操作的函數執行成功後，指示全局deferred對象執行下一個函數，達到異步的效果。

新建完成$.Deferred實例deferred之後，調用deferred.resolve()代表成功完成響應，deferred.reject()即代表調用失敗響應。

這裏我們主要寫一下這種調用方式實現的tiny版。

首先我們寫一個Callback對象維護我們的回調函數隊列

var Callbacks = function () {
    function Callbacks () {
        this.callbacks = [];
    }
    Callbacks.prototype.add = function (fn) {
        this.callbacks.add(fn);
        return this;
    }
    Callbacks.prototype.fire = function () {
        var len = this.callbacks.length;
        if(len) {
            this.callbacks.unshift()();
        }
    }
    return Callbacks;
}

這段代碼邏輯很簡單，Callbacks對象有兩個方法，分別是add和fire，調用add則向當前的callbacks數組內新增一個function。fire方法，則從Callbacks中提取最前的一個callback，並執行它。

對於Deferred對象，我們至少需要resolve和reject兩個方法。進行成功和失敗的調用。並且能夠進行鏈式調用。

var Deferred = function () {
    this.successCbs = new Callbacks();
    this.errorCbs = new Callbacks();
}
Deferred.prototype.then = function (successCb, errorCb) {
    this.successCbs.add(successCb);
    this.errorCbs.add(errorCb);
    return this;
}
Deferred.prototype.resolve = function () {
    this.successCbs.fire();
    return this;
}
Deferred.prototype.reject = function () {
    this.errorCbs.fire();
    return this;
}

這樣簡單完成之後，我們新建一個Deferred實例，就能夠通過鏈式調用的方式進行異步操作。

var deferred = new Deferred();
function printA() {
    setTimeout(function () {
        console.log(‘A‘);
        deferred.resolve();
    }, 1000);
    return deferred;
}
function printB() {
    setTimeout(function () {
        console.log(‘B‘);
        deferred.resolve();
    }, 1000);
}

printA()
    .then(printB)
    .then(printA)

同樣的，我們可以封裝一個自制tiny-Deferred對象的tiny-ajax方法。

var ajax = function (options) {
    var xhrOptions = {
        type: options.type || ‘get‘,
        url: options.url || ‘/default/path‘,
        async: options.async || true
    };
    var deferred = new Deferred();
    var xhr = new XHRHttpRequest();
    xhr.open(xhrOptions.type, xhrOptions.url, xhrOptions.async);
    xhr.onload = function (result) {
        deferred.resolve(result);
    }
    xhr.onerror = function ()
    xhr.send();
    return deferred;
}

over

優化：更優雅的異步代碼？