如何在jQuery中批量處理ajax請求？

Question

我想知道如何在n組中做ajax調用。

這裏是我的使用案例：

我有一個表顯示使用情況數據。您可以鑽取每一行，並且如果每行都有一個可以深入鑽取的公共屬性，則可以選擇一次鑽取所有這些屬性。對於每一行，都會調用ajax來獲取要附加到表中的數據。

在某些情況下，最多可同時鑽取50行。正如你可以想象的那樣，這給服務器帶來了很大的壓力。如何以最佳方式將這些電話以較小的批次發送，然後再等待批量發出？

我知道有像jquery消息隊列這樣的插件能夠幫助我，但這是一個工作項目，所以我們希望儘可能地避免插件。

Answer 1

你可以看看使用jQuery.when，它允許您在所有請求完成時執行回調函數。

$.when($.ajax("request1"), $.ajax("request2"), $.ajax("request3")) 
.done(function(data1, data2, data3){ 
     // Do something with the data 
}); 

或者

$.when($.ajax("request1"), $.ajax("request2"), $.ajax("request3")) 
.then(successCallback, errorHandler); 

有關更多信息，請參閱以下post。

此外，我不確定您對使用插件的理解應該受到您處於工作環境中的事實的影響，尤其是如果它簡化了您的工作。因此可以提高生產力。當然，你必須仔細選擇你的插件，因爲質量和長期維護可能是一個問題。

Answer 2

使用jQuery進行Ajax調用通常是異步的。因此，如果您有50行，jQuery將異步發送所有50個請求 - 當您從服務器獲得響應時，您無法控制處理的順序。

您可以在$.ajax呼叫使用async: false這樣，只有一個請求是通過你的行發送到服務器，你的循環：

$.ajax({ 
    url: location, 
    data: params, 
    async: false, 
    success: function(msg) { // do something} 
}); 

這種方法（async: false）的問題是，用戶可能會遇到「凍結」或無響應的頁面。

另一種方法是使用遞歸在JavaScript，以便調用仍然異步但Ajax調用仍然等待每行類似如下的成功事件：

var maxRows = 50; 

function myFunc(index) { 
    $.ajax({ 
     url: location, 
     data: params, 
     async: true, 
     success: function(msg) { 
      if (index < maxRows) { 
       // do something 
      } 
      else { 
       return; //index equals maxRows--stop the recursion 
      } 
      index++; 
      myFunc(index); //call the function again 
     } 
    }); 

    $(document).ready(function() { 
     myFunc(0);  
    }); 
} 

Answer 3

我同意eicto：如果您不能整合另一個，請自己創建消息管理器。這是我的一個小小的破解：

var AjaxQueue = function(max) { 
    this.max = max; 
    this.requests = []; 
    this.current = 0; 
} 

AjaxQueue.prototype.ajax = function(opts) { 
    var queue = this; 
    opts.complete = function(jqXHR, textStatus) { 
    queue.current -= 1; 
    queue.send(); 
    }; 
    this.requests.push(opts); 
    this.send(); 
} 

AjaxQueue.prototype.send = function(opts) { 
    while (this.current < this.max && this.requests.length > 0) { 
    $.ajax(this.requests.unshift()); 
    this.current += 1; 
    } 
} 

我還沒有嘗試過使用它，所以肯定會有錯誤。另外它假定你沒有使用complete選項。它只是壓倒它。如果你可以檢查它，並確保先前的完整功能仍然被調用。

Answer 4

調用的遞歸批處理適合我。但是，因爲我正在獲取4K的XHR2 blob並將每個節點保存在IndexedDB（PouchDB）中。我有線程爲XHR2和IDB放。所以，我不得不更加複雜一點：

 for (var i in info.LayerInfo) { 
     var imageType = (info.LayerInfo[i].Class == "BASE") ? "jpg" : "png"; 
     info.LayerInfo[i].SaveCount = 0; 
     getLayer(0, info, info.LayerInfo[i], info.LayerInfo[i].Path, imageType); 
    } 
} 

function getLayer(index, info, layer, base, imageType) { 
    if (layer.Files.length == 0) { 
     console.log("Thread done: " + index + " SaveCount: " + layer.SaveCount); 
     return; 
    } 
    var val = layer.Files.shift(); 
    var path = base + "/" + val.id + "." + imageType; 
    $xhr.ajax({ 
     url: path, 
     dataType: "blob", 
     success: function (data) { 
      console.log("fetched: ", layer.Type + "-" + val.id); 
      saveBlob(data, val.size, val.id, layer.Type, index, info, layer, base, imageType); 
      if (index < maxThreads - 1) { 
       getLayer(++index, info, layer, base, imageType); 
      } else { 
       return; 
      } 
     } 
    }); 
} 

function saveBlob(blob, length, id, layerID, index, info, layer, base, imageType) { 
    if (blob.size != length) { 
     console.error("Blob Length found: ", blob.size, " expected: ", length); 
    } 
    var blobID = layerID + "-" + id; 
    var type = blob.type; 
    DB.putAttachment(blobID + "/pic", blob, type, function (err, response) { 
     if (err) { 
      console.error("Could store blob: error: " + err.error + " reason: " + err.reason + " status: " + err.status); 
     } else { 
      console.log("saved: ", response.id + " rev: " + response.rev); 
      layer.SaveCount++; 
      getLayer(index, info, layer, base, imageType); 
     } 
    }); 
}