使用多个延迟的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) {
  // ...
});

现在奇怪的是，如果我显示结果，'age'将显示在控制台中，但如果我尝试使用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

在两个请求都成功之前，延迟对象将无法解析（如果任何请求失败，则将失败）。