Параллельные асинхронные запросы Ajax с использованием jQuery

Question

Я бы хотел обновить страницу, основываясь на результатах нескольких запросов ajax / json. Используя jQuery, я могу «связать» обратные вызовы, как этот очень простой урезанный пример:

$.getJSON("/values/1", function(data) {
  // data = {value: 1}
  var value_1 = data.value;

  $.getJSON("/values/2", function(data) {
    // data = {value: 42}
    var value_2 = data.value;

    var sum = value_1 + value_2;

    $('#mynode').html(sum);
  });

});

Однако это приводит к тому, что запросы выполняются последовательно. Я бы предпочел способ делать запросы параллельно и выполнять обновление страницы после того, как все будет завершено. Есть ли способ сделать это?

Answer 1

Опираясь на ответ Яир. Вы можете определить ajax-обещания динамически.

var start = 1; // starting value
var len = 2; // no. of requests

var promises = (new Array(len)).fill().map(function() {
    return $.ajax("/values/" + i++);
});

$.when.apply($, promises)
  .then(myFunc, myFailure);

Answer 2

Если результат одного запроса зависит от другого, вы не можете сделать их параллельными.

Answer 3

Предположим, у вас есть массив с именем файла.

var templateNameArray=["test.html","test2.html","test3.html"];

htmlTemplatesLoadStateMap={};
var deffereds=[];
  for (var i = 0; i < templateNameArray.length; i++)
       {
        if (!htmlTemplatesLoadStateMap[templateNameArray[i]]) 
            {         
              deferreds.push($.get("./Content/templates/" +templateNameArray[i], 

                  function (response, status, xhr) {
                      if (status == "error") { } 
                        else {
                                $("body").append(response);
                               }
                         }));             
htmlTemplatesLoadStateMap[templateNameArray[i]] = true;
                       }
                  }
                                      $.when.all(deferreds).always(function(resultsArray) {   yourfunctionTobeExecuted(yourPayload);
                                });