使用多个延迟 ajax 调用时获取正确数据

Question

我有一个函数使用两个 ajax 调用来获取正确的信息：

var getUsers = function() {
  return $.getJSON("http://codepen.io/chriscoyier/pen/EAIJj.js", function(foo) {
    return $.getJSON("http://codepen.io/chriscoyier/pen/EAIJj.js", function(bar) {
      return foo['age'] = bar.type;
    });
  });
}

还有一个外部函数，它调用当前函数并且仅在调用完成后继续。

getUsers().then(function(result) {
  // ...
});

现在奇怪的是，如果我显示结果，“年龄”将显示在控制台中，但如果我尝试使用 result['age'] 访问它，它将返回 undefined。

是否有处理多个延迟调用的正确方法？

代码

http://codepen.io/norbiu/pen/bNRQxL

Answer 1

编辑而不是使用单独的延迟，您可以像这样链接从getJSON()返回的那些

var getUsers = function() {
  var foo;
  return $.getJSON("http://codepen.io/chriscoyier/pen/EAIJj.js")
  .then(function(data) {
      foo = data;
      return $.getJSON("http://codepen.io/chriscoyier/pen/EAIJj.js")
  }).then(function(bar) {
      foo['age'] = bar.type;
      return foo;
  });
}

注意：您需要保存第一次调用的返回值，否则第二次调用将无法访问。

后人的原始代码

您可以使用 jQuery Deferred 对象并将其返回

var getUsers = function() {
  var dfd = $.Deferred();
  $.getJSON("http://codepen.io/chriscoyier/pen/EAIJj.js")
  .done(function(foo) {
    $.getJSON("http://codepen.io/chriscoyier/pen/EAIJj.js")
    .done(function(bar) {
      foo['age'] = bar.type;
      dfd.resolve(foo);
    }).fail(function(e) {
       dfd.reject(e);
    })
  }).fail(function(e) {
      dfd.reject(e);
  });
  return dfd.promise();
}

http://codepen.io/anon/pen/pvwqZo

在两个请求都成功之前，延迟对象不会解析（如果其中任何一个失败，则会失败）。