我們已經(jīng)實(shí)現(xiàn)了一個(gè)簡單的JavaScript異步調(diào)用框架，然而還有一些美中不足，那就是順序執(zhí)行的異步函數(shù)需要用嵌套的方式來聲明。

成都創(chuàng)新互聯(lián)公司公司2013年成立，先為莎車等服務(wù)建站，莎車等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為莎車企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

現(xiàn)實(shí)開發(fā)中，要按順序執(zhí)行一系列的同步異步操作又是很常見的。還是用百度Hi網(wǎng)頁版中的例子，我們先要異步獲取聯(lián)系人列表，然后再異步獲取每一個(gè)聯(lián)系人的具體信息，而且后者是分頁獲取的，每次請求發(fā)送10個(gè)聯(lián)系人的名稱然后取回對應(yīng)的具體信息。這就是多個(gè)需要順序執(zhí)行的異步請求。

為此，我們需要設(shè)計(jì)一種新的操作方式來優(yōu)化代碼可讀性，讓順序異步操作代碼看起來和傳統(tǒng)的順序同步操作代碼一樣優(yōu)雅。

傳統(tǒng)做法

大多數(shù)程序員都能夠很好的理解順序執(zhí)行的代碼，例如這樣子的：

 
 
 

  
  
  
var firstResult = firstOperation(initialArgument); 
  
  
  
var secondResult = secondOperation(firstResult); 
  
  
  
var finalResult = thirdOperation(secondResult); 
  
  
  
alert(finalResult);
 
 
 

其中先執(zhí)行的函數(shù)為后執(zhí)行的函數(shù)提供所需的數(shù)據(jù)。然而使用我們的JavaScript異步調(diào)用框架后，同樣的邏輯必須變成這樣子：

 
 
 

  
  
  
firstAsyncOperation(initialArgument).addCallback(function(firstResult) { 
  
  
  
  secondAsyncOperation(firstResult).addCallback(function(secondResult) { 
  
  
  
    thirdAsyncOperation(secondResult).addCallback(function(finalResult) {   
  
  
  
      alert(finalResult); 
  
  
  
    }); 
  
  
  
  }); 
  
  
  
});
 
 
 

鏈?zhǔn)綄懛?/strong>

我認(rèn)為上面的代碼實(shí)在是太不美觀了，并且希望能夠改造為jQuery風(fēng)格的鏈?zhǔn)綄懛?。為此，我們先?gòu)造一個(gè)用例：

 
 
 

  
  
  
Async.go(initialArgument) 
  
  
  
  .next(firstAsyncOperation) 
  
  
  
  .next(secondAsyncOperation) 
  
  
  
  .next(thirdAsyncOperation) 
  
  
  
  .next(function(finalResult) { alert(finalResult); })
 
 
 

在這個(gè)用例當(dāng)中，我們在go傳入初始化數(shù)據(jù)，然后每一個(gè)next后面?zhèn)魅胍粋€(gè)數(shù)據(jù)處理函數(shù)，這些處理函數(shù)按順序?qū)?shù)據(jù)進(jìn)行處理。

同步并存

上面的用例調(diào)用到的全部都是異步函數(shù)，不過我們***能夠兼容同步函數(shù)，讓使用者無需關(guān)心函數(shù)的具體實(shí)現(xiàn)，也能使用這項(xiàng)功能。為此我們再寫一個(gè)這樣的用例：

 
 
 

  
  
  
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毫秒。

異步本質(zhì)

一個(gè)鏈?zhǔn)秸{(diào)用，本質(zhì)上也是一個(gè)異步調(diào)用，所以它返回的也是一個(gè)Operation實(shí)例。這個(gè)實(shí)例自然也有result、state和completed這幾個(gè)字段，并且當(dāng)整個(gè)鏈?zhǔn)秸{(diào)用完成時(shí)，result等于***一個(gè)調(diào)用返回的結(jié)果，而completed自然是等于true。

我們可以擴(kuò)展一下上一個(gè)用例，得到如下用例代碼：

 
 
 

  
  
  
var chainOperation = 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; }); 
  
  
  

  
  
  
setTiemout(function() { alert(chainOperation.result; }, 2000); 
 
 
 

把鏈?zhǔn)秸{(diào)用的返回保存下來，在鏈?zhǔn)秸{(diào)用完成時(shí)，它的result應(yīng)該與***一個(gè)操作的返回一致。在上述用例中，也就是3。

調(diào)用時(shí)機(jī)

盡管我們提供了一種鏈?zhǔn)秸{(diào)用方式，但是用戶不一定會按照這種固定的方式來調(diào)用，所以我們?nèi)匀灰紤]兼容用戶的各種可能用法，例如說異步地用next往調(diào)用鏈添加操作：

 
 
 

  
  
  
var chainOperation = Async.go(0); 
  
  
  
chainOperation.next(function(i) { alert(i); return i + 1; }); 
  
  
  
setTimeout(function() { 
  
  
  
  chainOperation.next(function(i) { 
  
  
  
    alert(i); 
  
  
  
    var operation = new Async.Operation(); 
  
  
  
    setTimeout(function() { operation.yield(i + 1); }, 2000); 
  
  
  
    return operation; 
  
  
  
  }) 
  
  
  
}, 1000); 
  
  
  
setTimeout(function() { 
  
  
  
  chainOperation.next(function(i) { alert(i); return i + 1; }); 
  
  
  
}, 2000);
 
 
 

在這個(gè)用例當(dāng)中，用戶每隔1000毫秒添加一個(gè)操作，而其中第二個(gè)操作耗時(shí)2000毫秒。也就是說，添加第三個(gè)操作時(shí)第二個(gè)操作還沒返回。作為一個(gè)健壯的框架，必須要能兼容這樣的使用方式。

此外我們還要考慮，用戶可能想要先構(gòu)造調(diào)用鏈，然后再執(zhí)行調(diào)用鏈。這時(shí)候用戶就會先使用next方法添加操作，再使用go方法執(zhí)行。

 
 
 

  
  
  
var chainOperation = Async 
  
  
  
  .chain(function(i) { alert(i); return i + 1; }) 
  
  
  
  .next(function(i) { 
  
  
  
    alert(i); 
  
  
  
    var operation = new Async.Operation(); 
  
  
  
    setTimeout(function() { operation.yield(i + 1); }, 2000); 
  
  
  
    return operation; 
  
  
  
  }) 
  
  
  
  .go(0) 
  
  
  
setTimeout(function() { 
  
  
  
  chainOperation.next(function(i) { alert(i); return i + 1; }) 
  
  
  
}, 1000);
 
 
 

在上述用例中，用戶通過chain和next添加了頭同步操作和異步操作各一個(gè)，然后用go執(zhí)行調(diào)用鏈，在調(diào)用鏈執(zhí)行完畢之前又用next異步追加了一個(gè)操作。一個(gè)健壯的框架，在這樣的用例當(dāng)中應(yīng)該能夠如同用戶所期望的那樣提示0, 1, 2。

小結(jié)

針對鏈?zhǔn)秸{(diào)用的需求，我們設(shè)計(jì)了如此多的用例，包括各種奇怪的JavaScript異步調(diào)用方式。具體實(shí)現(xiàn)方法，將在下文中講述。