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

ourjs發表於2014-05-27

  我曾經為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

相關文章