JavaScript 異步調用框架 (Part 3 - 代碼實現)

2019-11-21 01:13:09

字體：大中小

來源：轉載

供稿：網友

類結構
首先我們來搭一個架子，把需要用到的似有變量都列出來。我們需要一個數組，來保存回調函數列表；需要一個標志位，來表示異步操作是否已完成；還可以學IAsyncResult，加一個state，允許異步操作的實現者對外暴露自定義的執行狀態；最后加一個變量保存異步操作結果。

復制代碼代碼如下:

 
Async = { 
Operation: { 
var callbackQueue = []; 
this.result = undefined; 
this.state = "waiting"; 
this.completed = false; 
} 
} 

addCallback方法
接下來，我們要實現addCallback方法，它的工作職責很簡單，就是把回調函數放到callbackQueue中。此外，如果此時completed為true，說明異步操作已經yield過了，則立即調用此回調。

復制代碼代碼如下:

 
this.yield = function(callback) { 
callbackQueue.push(callback); 
if (this.completed) { 
this.yield(this.result); 
} 
return this; 
} 

我們假設yield方法會把callbackQueue中的回調函數逐個取出來然后調用，因此如果compeleted為true，則使用已有的result再調用一次yield就可以了，這樣yield自然會調用這次添加到callbackQueue的回調函數。
至于最后的return this;，只是為了方便jQuery風格的鏈式寫法，可以通過點號分隔連續添加多個回調函數：

復制代碼代碼如下:

 
asyncOperation(argument) 
.addCallback(firstCallback) 
.addCallback(secondCallback); 

yield方法
最后，我們要實現yield方法。它需要將callbackQueue中的回調函數逐個取出來，然后都調用一遍，并且保證這個操作是異步吧。

復制代碼代碼如下:

 
this.yield = function(result) { 
var self = this; 
setTimeout(function() { 
self.result = result; 
self.state = "completed"; 
self.completed = true; 
while (callbackQueue.length > 0) { 
var callback = callbackQueue.shift(); 
callback(self.result); 
} 
}, 1); 
return this; 
} 

通過使用setTimeout，我們確保了yield的實際操作是異步進行的。然后我們把用戶傳入yield的結果及相關狀態更新到對象屬性之上，最后遍歷callbackQueue調用所有的回調函數。
小結
這樣我們就做好了一個簡單的JavaScript異步調用框架，完整的代碼可以看這里：異步調用框架Async.Operation。
這個框架能夠很好的解決調用棧中出現同步異步操作并存的情況，假設所有函數都返回Async.Operation，框架的使用者可以使用一種統一的模式來編寫代碼，處理函數返回，而無需關心這個函數實際上是同步返回了還是異步返回了。
對于串行調用多個異步函數的情況，我們現在可以用嵌套addCallback的方式來書寫，但隨著嵌套層數的增多，代碼會變得越來越不美觀：

復制代碼代碼如下:

 
firstAsyncOperation().addCallback(function() { 
secondAsyncOperation().addCallback(function() { 
thirdAsyncOperation().addCallback(function() { 
finalSyncOperation(); 
}); 
}); 
}); 

我們能否把嵌套形式改為jQuery風格的鏈式寫法呢？這是我們接下來要思考的問題，如果你不希望錯過相關討論的話

上一篇：JavaScript 異步調用框架 (Part 4 - 鏈式調用)

下一篇：JavaScript 異步調用框架 (Part 2 - 用例設計)