JavaScript 異步調用框架 (Part 4 - 鏈式調用)
2024-05-06 14:14:27
供稿：網友
現實開發中，要按順序執行一系列的同步異步操作又是很常見的。還是用百度Hi網頁版中的例子，我們先要異步獲取聯系人列表，然后再異步獲取每一個聯系人的具體信息，而且后者是分頁獲取的，每次請求發送10個聯系人的名稱然后取回對應的具體信息。這就是多個需要順序執行的異步請求。
為此，我們需要設計一種新的操作方式來優化代碼可讀性，讓順序異步操作代碼看起來和傳統的順序同步操作代碼一樣優雅。
傳統做法
大多數程序員都能夠很好的理解順序執行的代碼，例如這樣子的：
代碼如下:
var firstResult = firstOperation(initialArgument);
var secondResult = secondOperation(firstResult);
var finalResult = thirdOperation(secondResult);
alert(finalResult);
其中先執行的函數為后執行的函數提供所需的數據。然而使用我們的異步調用框架后，同樣的邏輯必須變成這樣子：
代碼如下:
firstAsyncOperation(initialArgument).addCallback(function(firstResult) {
secondAsyncOperation(firstResult).addCallback(function(secondResult) {
thirdAsyncOperation(secondResult).addCallback(function(finalResult) {
alert(finalResult);
});
});
});
鏈式寫法
我認為上面的代碼實在是太不美觀了，并且希望能夠改造為jQuery風格的鏈式寫法。為此，我們先構造一個用例：
代碼如下:
Async.go(initialArgument)
.next(firstAsyncOperation)
.next(secondAsyncOperation)
.next(thirdAsyncOperation)
.next(function(finalResult) { alert(finalResult); })
在這個用例當中，我們在go傳入初始化數據，然后每一個next后面傳入一個數據處理函數，這些處理函數按順序對數據進行處理。
同步并存
上面的用例調用到的全部都是異步函數，不過我們最好能夠兼容同步函數，讓使用者無需關心函數的具體實現，也能使用這項功能。為此我們再寫一個這樣的用例：
代碼如下:
Async.go(0)
.next(function(i) { alert(i); return i + 1; })
.next(function(i) {
alert(i);
var operation = new Async.Operation();
setTimeout(function() { operation.yield(i + 1); }, 1000);
return operation;
})
.next(function(i) { alert(i); return i + 1; })
.next(function(i) { alert(i); return i; });
在上述用例中，我們期待能夠看到0, 1, 2, 3的提示信息序列，并且1和2之間間隔為1000毫秒。
異步本質
一個鏈式調用，本質上也是一個異步調用，所以它返回的也是一個Operation實例。這個實例自然也有result、state和completed這幾個字段，并且當整個鏈式調用完成時，result等于最后一個調用返回的結果，而completed自然是等于true。
我們可以擴展一下上一個用例，得到如下用例代碼：
代碼如下:
var chainOperation = Async.go(0)
.next(function(i) { alert(i); return i + 1; })
