Есть ли шаблон проектирования для управления параллельными запросами AJAX?

Question

Я разрабатываю веб-приложение для извлечения данных из нескольких веб-сервисов (скажем, только для упрощения). То, что должно быть извлечено из одной службы, не зависит от того, что было получено от другого, поэтому я могу запускать запросы AJAX параллельно. Мне нужно затем выполнить некоторые действия после того, как оба вопроса возвратили свои данные. Поскольку это, кажется, что-то очень обычное, мне интересно, есть ли хорошо оформленный и принятый шаблон дизайна для этого. Что я делаю до сих пор находится там (с помощью JQuery):

var data1 = null; 
var data2 = null; 

$.ajax({ 
    url : url1, 
    success: function(data) { 
     data1 = data; 
     if(data2) perform(); 
    }, 
}); 

$.ajax({ 
    url : url2, 
    success: function(data) { 
     data2 = data; 
     if(data1) perform(); 
    }, 
}); 

function perform() { 
    //do interesting stuff on data1 and data2 
} 

ли вы сделать так, как-хорошо?

Answer 1

вы можете сделать, как этот

Проверил: JQuery: api.jquery.com/jquery.when

мы можем использовать метод $.when() JQuery, которая принимает список этих "отсроченных" объектов (все JQuery Ajax-методы возвращают отложенные объекты), а затем предоставляет один обратный вызов.

Синтаксис

$.when(

    // Deferred object (probably Ajax request), 

    // Deferred object (probably Ajax request), 

    // Deferred object (probably Ajax request) 

).then(function() { 

    // All have been resolved (or rejected), do your thing 

}); 

Пример:

$.when($.ajax("/page1.php"), $.ajax("/page2.php")) 
    .then(myFunc, myFailure); 

Answer 2

Когда у меня есть несколько запросов AJAX Я обычно люблю держать список URL-адреса. Я создаю список обещаний и применяю к ним функцию $.when. Что-то вроде этого:

var urls = [url1, url2]; 

var endpoints = []; 
for (var i = 0; i < a.length; i+=1) { 
    endpoints.push($.ajax(urls[i])); 
} 
$.when.apply($, endpoints).done(function() { 
    // Function arguments array differs if we have one or more than one endpoint. 
    // When called with one endpoint arguments is an array of three elements [data, textStatus, jqXHR]. 
    // When called with more than one endpoint arguments is an array of arrays [[data, textStatus, jqXHR], ...]. 
    // Normalize the single endpoint to the generic list one. 
    var args = endpoints.length > 1 ? arguments : [arguments]; 
}); 

Или более кратко:

var urls = ['page1', 'page2']; 
$.when.apply($, $.map(urls, $.ajax)).done(function() { 
    console.log(arguments); 
});