Question

我正在开发一个从多个Web服务中检索数据的Web应用程序（简单地说，只有两个用于简化）。必须从一个服务检索的内容不依赖于从另一个服务检索到的内容，因此我可以并行启动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

我们可以使用jQuery的$.when()方法，该方法列出了这些＆＃34; Deferred＆＃34;对象（所有jQuery Ajax方法返回Deferred对象），然后提供单个回调。

语法

$.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列表。我创建了一个promises列表并将$.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);
});

是否有设计模式来管理并行AJAX查询？

2 个答案: