Question

在Javascript中，我有两个对数据的异步请求：

$.getJSON('http://foo.com', fooQuery, fooSuccess(data));
$.getJSON('http://bar.com', barQuery, barSuccess(data));

和两个回调来处理收到的数据：

fooSuccess(data) { // Stuff }
barSuccess(data) { // More Stuff }

如何确保仅在fooSuccess完成后执行barSuccess？

注意：

我希望保持数据请求的原样：异步和非阻塞（因为服务器响应可能需要一段时间）。
但是，我希望处理数据的回调顺序执行。也就是说，在fooSuccess完成之前，我不想执行barSuccess。

非常感谢你的智慧和帮助！

Answer 1

以下是使用ajax请求返回的jQuery延迟对象的方法。

var fooDfd = $.getJSON('http://foo.com', fooQuery);
var barDfd = $.getJSON('http://bar.com', barQuery);

fooDfd.then(function(fooData){
    fooSuccess(fooData);
    barDfd.then(barSuccess);
});

Answer 2

最好的方法是使用jQuery when().done()这样的功能：

$.when(
    $.getJSON('http://foo.com', fooQuery, fooSuccess(data)), 
    $.getJSON('http://bar.com', barQuery, barSuccess(data))
).done(function(arg1, arg2){
    fooSuccess(arg1);
    barSuccess(arg2);
});

一旦所有请求成功完成，这允许同时执行AJAX请求并保证执行done()函数。

Answer 3

我在半个小时前跟随这篇非常有趣的帖子，当看到由@Mike Brant呈现的优雅解决方案时，我很快就会潜入jquery库，看看魔术是如何制作的。不是吗？我推荐，非常有趣！ BTW我认为我们不需要那么神奇，不是在这种情况下，我们有两个异步调用处理程序（函数），无论哪个结束，我们需要知道第二个结束时，那么我们所需要的只是第三个函数这将由两个处理程序调用，并在所有数据准备就绪时执行。我知道这种方法将比优雅的jquery解决方案更多地消耗四到五行代码，但最终我们的大脑和灵魂将处于更好的状态。对不起我的英文。

Answer 4

将barSuccess来电置于fooSuccess成功回拨中。

fooSuccess(data){
  jQuery.ajax({
    data: data,
    success: function(response){
      barSuccess(data) //should still be in scope, I think?
    }
  }
}

保证Javascript中的异步请求回调顺序

4 个答案: