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

Question

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

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

还有两个回调来处理接收到的数据：

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

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

注意事项：

• 我想保持数据请求原样：异步和非阻塞（因为服务器响应可能需要一段时间）。
• 但是，我希望处理数据的回调按顺序执行。也就是说，我不想在 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 库，看看它是如何产生的。不是吗？我推荐，很有趣！ 顺便说一句，我认为我们不需要所有的魔法，在这种情况下，我们有两个异步调用处理程序（函数），无论哪个端首先，我们需要知道第二个结束的时间，那么我们只需要第三个函数这将由两个处理程序调用并在所有数据准备好时执行。我知道这种方法会比优雅的 jquery 解决方案多写四五行代码，但最终我们的大脑和灵魂会处于更好的状态。对不起我的英语。

Answer 4

将barSuccess 调用放入fooSuccess 成功回调中。

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