jQuery：在一個回撥中處理多個請求

ourjs發表於2014-05-27
jQuery

　　我曾經為Mozilla Developer Network 開發一個新功能，它需要載入一個基本的指令碼檔案的同時載入一個JSON請求。因為我們使用的是jQuery，意味著要使用 jQuery.getScript和jQuery.getJSON。我知道這兩者都是非同步的並返回一個Deferred（jQuery中的Promise模式實現, 參見： deffered object）物件，因此我想知道能不能在一個回撥裡按順序請求它們，就像多數的JavaScript載入器那樣（如curljs ）。我很幸運，使用jQuery就可以用一個回撥處理兩個請求。

　　jQuery的JavaScript程式碼

　　就像我剛才提到的，我需要載入一個指令碼和一個JSON檔案，就像這樣：

$.when(
  $.getScript('/media/js/wiki-min.js?build=21eb633'),
  $.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/')
).then(function(a, b) {
    // 或者 ".done"
    // 好了，東西都載入好了，可以幹活了

});

　　當資原始檔載入完時，done或者callback就會被觸發，我就知道已經請求完了。每一個請求都返回了不同的回撥引數，如上面的返回引數就像這樣：

// [response, state, jqxhr], [response, state, jqxhr]
["(function(c){var e=c(".from-search-navigate");if(e…;if(j){g.apply(m,l)}}}})(window,document,jQuery);", "success", Object] [Array[15], "success", Object]

　　如果我們希望再載入一個傳統的Ajax請求，就像獲取一個HTML模板，我們可以這樣：

$.when(
    $.getScript('/media/js/wiki-min.js?build=21eb633'),
    $.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/'),
    $.get('/')
).then(function(a, b, c) {
    console.log(a, b, c);
});

　　Dojo Toolkit很早以前就有類似的功能了，但是我不知道現代jQuery也可以。在一個回撥中處理多個請求在請多場合需要用到，可以看出jQuery也在與時俱進。

　　原文 davidwalsh.name

相關文章