JavaScript 異步調(diào)用框架 (Part 6 - 實(shí)例 & 模式)
2024-05-06 14:14:33
供稿：網(wǎng)友
封裝Ajax
設(shè)計(jì)Async.Operation的最初目的就是解決Ajax調(diào)用需要傳遞callback參數(shù)的問題，為此我們先把Ajax請(qǐng)求封裝為Async.Operation。我在這里使用的是jQuery，當(dāng)然無論你用什么基礎(chǔ)庫，在使用Async.Operation時(shí)都可以做這種簡(jiǎn)單的封裝。
代碼如下:
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;
};
在我所調(diào)用的服務(wù)器端API中，只需要GET和POST，且數(shù)據(jù)都為JSON，所以我就直接把jQuery提供的其它Ajax選項(xiàng)屏蔽掉了，并設(shè)置數(shù)據(jù)類型為JSON。在你的項(xiàng)目當(dāng)中，也可以用類似的方式將Ajax封裝為若干僅僅返回Async.Operation的方法，將jQuery提供的選項(xiàng)都封裝在Ajax這一層內(nèi)，不再向上層暴露這些選項(xiàng)。
調(diào)用Ajax
把Ajax封裝好后，我們就可以開始專心寫業(yè)務(wù)邏輯了。
假設(shè)我們有一個(gè)Friend對(duì)象，它的get方法用于返回單個(gè)好友對(duì)象，而getAll方法用于返回所有好友對(duì)象。于此對(duì)應(yīng)的是兩個(gè)服務(wù)器端API，friend接口會(huì)返回單個(gè)好友JSON，而friendlist接口會(huì)返回所有好友名稱組成的JSON。
首先我們看看較為基礎(chǔ)的get方法怎么寫：
代碼如下:
function get(name) {
return Ajax.get("/friend", "name=" + encodeURIComponent(name));
}
就這么簡(jiǎn)單？對(duì)的，假如服務(wù)器端API返回的JSON結(jié)構(gòu)正好就是你要的好友對(duì)象結(jié)構(gòu)的話。如果JSON結(jié)構(gòu)和好友對(duì)象結(jié)構(gòu)是異構(gòu)的，或許你還要加點(diǎn)代碼來把JSON映射為對(duì)象：
代碼如下:
function get(name) {
var operation = new Async.Operation()
Ajax.get("/friend", "name=" + encodeURIComponent(name))
.addCallback(function(json) {
operation.yield(createFriendFromJson(json));
});
return operation;
}
Ajax隊(duì)列
接下來我們要編寫的是getAll方法。因?yàn)閒riendlist接口只返回好友名稱列表，因此在取得這份列表后我們還要逐一調(diào)用get方法獲取具體的好友對(duì)象。考慮到在同時(shí)進(jìn)行多個(gè)friend接口調(diào)用可能觸發(fā)服務(wù)器的防攻擊策略，導(dǎo)致被關(guān)小黑屋一段時(shí)間，所以對(duì)friend接口的調(diào)用必須排隊(duì)。
代碼如下:
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;
}
在這里，我們假設(shè)friendlist接口返回的JSON就是一個(gè)Array，在獲取到這個(gè)Array后構(gòu)造一個(gè)等長的異步調(diào)用隊(duì)列，其中每一個(gè)調(diào)用的邏輯都是一樣的——取出Array中首個(gè)好友的名稱，用get方法獲取對(duì)應(yīng)的好友對(duì)象，再將好友對(duì)象放入另一個(gè)Array中。在調(diào)用隊(duì)列的末端，我們?cè)僮芳恿艘粋€(gè)調(diào)用，用于返回保存好友對(duì)象的Array。
