JavaScript 異步調用框架 (Part 6 - 實例 & 模式)

更新時間：2009年08月04日 00:15:42 作者：

我們用了5篇文章來討論如何編寫一個JavaScript異步調用框架（問題 & 場景、用例設計、代碼實現(xiàn)、鏈式調用、鏈式實現(xiàn)），現(xiàn)在是時候讓我們看一下在各種常見開發(fā)情景中如何使用它了。

封裝Ajax
設計Async.Operation的最初目的就是解決Ajax調用需要傳遞callback參數(shù)的問題，為此我們先把Ajax請求封裝為Async.Operation。我在這里使用的是jQuery，當然無論你用什么基礎庫，在使用Async.Operation時都可以做這種簡單的封裝。

復制代碼代碼如下:

 
var Ajax = {}; 

Ajax.get = function(url, data) { 
var operation = new Async.Operation(); 
$.get(url, data, function(result) { operation.yield(result); }, "json"); 
return operation; 
}; 

Ajax.post = function(url, data) { 
var operation = new Async.Operation(); 
$.post(url, data, function(result) { operation.yield(result); }, "json"); 
return operation; 
}; 

在我所調用的服務器端API中，只需要GET和POST，且數(shù)據(jù)都為JSON，所以我就直接把jQuery提供的其它Ajax選項屏蔽掉了，并設置數(shù)據(jù)類型為JSON。在你的項目當中，也可以用類似的方式將Ajax封裝為若干僅僅返回Async.Operation的方法，將jQuery提供的選項都封裝在Ajax這一層內，不再向上層暴露這些選項。

調用Ajax
把Ajax封裝好后，我們就可以開始專心寫業(yè)務邏輯了。

假設我們有一個Friend對象，它的get方法用于返回單個好友對象，而getAll方法用于返回所有好友對象。于此對應的是兩個服務器端API，friend接口會返回單個好友JSON，而friendlist接口會返回所有好友名稱組成的JSON。

首先我們看看較為基礎的get方法怎么寫：

復制代碼代碼如下:

 
function get(name) { 
return Ajax.get("/friend", "name=" + encodeURIComponent(name)); 
} 

就這么簡單？對的，假如服務器端API返回的JSON結構正好就是你要的好友對象結構的話。如果JSON結構和好友對象結構是異構的，或許你還要加點代碼來把JSON映射為對象：

復制代碼代碼如下:

 
function get(name) { 
var operation = new Async.Operation() 
Ajax.get("/friend", "name=" + encodeURIComponent(name)) 
.addCallback(function(json) { 
operation.yield(createFriendFromJson(json)); 
}); 
return operation; 
} 

Ajax隊列
接下來我們要編寫的是getAll方法。因為friendlist接口只返回好友名稱列表，因此在取得這份列表后我們還要逐一調用get方法獲取具體的好友對象?？紤]到在同時進行多個friend接口調用可能觸發(fā)服務器的防攻擊策略，導致被關小黑屋一段時間，所以對friend接口的調用必須排隊。

復制代碼代碼如下:

 
function getAll(){ 
var operation = new Async.Operation(); 
var friends = []; 
var chain = Async.chain(); 
Ajax.get("/friendlist", "") 
.addCallback(function(json) { 
for (var i = 0; i < json.length; i++) { 
chain.next(function() { 
return get(json.shift()) 
.addCallback(function(friend) { friends.push(friend); }); 
}); 
} 
chain 
.next(function() { operation.yield(friends); }) 
.go(); 
}) 
return operation; 
} 

在這里，我們假設friendlist接口返回的JSON就是一個Array，在獲取到這個Array后構造一個等長的異步調用隊列，其中每一個調用的邏輯都是一樣的——取出Array中首個好友的名稱，用get方法獲取對應的好友對象，再將好友對象放入另一個Array中。在調用隊列的末端，我們再追加了一個調用，用于返回保存好友對象的Array。

在這個例子當中，我們沒有利用調用隊列會把上一個函數(shù)的結果傳遞給下一個函數(shù)的特性，不過也足夠展示調用隊列的用途了——讓多個底層為Ajax請求的異步操作按照固定的順序阻塞式執(zhí)行。

由于底層異步函數(shù)返回的就是Async.Operation，你可以直接把它傳遞給next方法，也可以用匿名函數(shù)包裝后傳遞給next方法，而匿名函數(shù)內部只需要一個return。

延時函數(shù)
在上面的例子中，使用隊列是為了避免觸發(fā)服務器的防攻擊策略，但有時候這還是不夠的。例如說，服務器要求兩個請求之間至少間隔500毫秒，否則就認為是攻擊，那么我們就要在隊列里面插入這個間隔了。

在原本next方法調用的匿名函數(shù)中手動加入setTimeout是一個辦法，但為什么我們不寫一個輔助函數(shù)來解決這類問題呢？讓我們來寫一個輔助方法并讓它和Async.Operation無縫結合起來。

復制代碼代碼如下:

 
Async.wait = function(delay, context) { 
var operation = new Async.Operation(); 
setTimeout(function() { operation.yield(context); }, delay); 
return operation; 
}; 

Async.Operation.prototype.wait = function(delay, context) { 
this.next(function(context) { return Async.wait(delay, context); }); 
} 

在有了這個輔助方法后，我們就可以在上述getAll方法中輕松實現(xiàn)在每個Ajax請求之間間隔500毫秒。在for循環(huán)內的加上對wait的調用就可以了。

復制代碼代碼如下:

 
for (var i = 0; i < json.length; i++) { 
chain 
.wait(500) 
.next(function() { 
return get(json.shift()) 
.addCallback(function(friend) { friends.push(friend); }); 
}); 
} 

小結
通過一些簡單的例子，我們了解到了Async.Operation常見的使用方式，以及在有需要的時候如何擴展它的功能。希望Async.Operation能夠有效幫助大家提高Ajax應用的代碼可讀性。

您可能感興趣的文章:

使用canvas實現(xiàn)鯉魚躍龍門的動畫效果
這篇文章主要給大家介紹了使用canvas實現(xiàn)鯉魚躍龍門的動畫效果,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,感興趣的小伙伴可以自己動手嘗試一下
2024-02-02
JS中appendChild追加子節(jié)點無效的解決方法
這篇文章主要給大家介紹了關于JS中appendChild追加子節(jié)點無效的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
2018-10-10
js模擬淘寶網(wǎng)的多級選擇菜單實現(xiàn)方法
這篇文章主要介紹了js模擬淘寶網(wǎng)的多級選擇菜單實現(xiàn)方法,涉及javascript針對頁面元素結點的遍歷與設置等操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
使用element-ui的upload組件上傳代碼包時遇到的問題小結
這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時遇到的問題及總結,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
php 中序列化和json使用介紹
序列化是將對象狀態(tài)轉換為可保持或可傳輸?shù)母袷降倪^程。與序列化相對的是反序列化，它將流轉換為對象。這兩個過程結合起來，可以輕松地存儲和傳輸數(shù)據(jù)
2013-07-07
js快速排序的實現(xiàn)代碼
快速排序是一種平均性能非常優(yōu)秀的排序算法，在很多場合都會應用到他，了解快速排序于對開放高效率的軟件有很重要的作用
2013-12-12
js獲取url中的參數(shù)且參數(shù)為中文時通過js解碼
這篇文章主要介紹了url中傳遞中文參數(shù)的時候通過js解碼,需要的朋友可以參考下
2014-03-03
js tab欄切換代碼實例解析
這篇文章主要介紹了js tab欄切換代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
JS文件中加載jquery.js的實例代碼
這篇文章主要介紹了JS文件中加載jquery.js的方法，JS文件添加其他JS的實例代碼，感興趣的小伙伴們可以參考一下，具體如下
2018-05-05
借助javascript代碼判斷網(wǎng)頁是靜態(tài)還是偽靜態(tài)
如何看同類型的網(wǎng)站采用的是靜態(tài)還是偽靜態(tài)，一般網(wǎng)頁后綴都是以.html結尾。我們可以借助一段簡單的javascript代碼判斷一下
2014-05-05