ajax 调用后从 Javascript 模块返回值

Question

---已编辑---由于我的无知，这实际上与所有其他 AJAX 类型的问题相同......需要进入正确的心态。为了后代的缘故，把它留在这里，也许可以帮助其他人在发布之前再看一下回调。

所以我想提前说，我认为这不是标准的“我如何从 ajax 调用返回值”问题，人们不等待异步调用结束。我认为这是对 Javascript 模块模式的变量范围误解，因此不胜感激。

我正在关注this SO post 构建我的 ajax 调用，因此我在调用完成后使用延迟对象来处理我的数据。还有一些关于 Javascript 模块模式的教程，例如 this 和 this。从外部模块内部的私有模块中返回值似乎相当简单——但是，我总是将 myObj.roots() 设为未定义。即使当我检查断点时它被定义为 X 值的数组。我错过了什么简单的事情——任何提示？谢谢！对不起一个简单的问题，我对 JS 模块模式完全陌生，正在尝试构建自己的库...

我的 JS 代码：

var myObj = (function(window,document,$,undefined){

  var _baseUri = 'http://example.com/',
      _serviceUri = 'services/',
      _bankId = '1234',
      _myUri = _baseUri + _serviceUri + 'objectivebanks/' + _bankId,
      _roots = [];

  function myAjax(requestURL) {
    return $.ajax({
      type: 'GET',
      url: requestURL,
      dataType: 'json',
      async: true
    });
  }

  var getRoots = function() {
    var _url = _myUri + '/objectives/roots';
    _roots = [];
    myAjax(_url).done(function(data) {
      $.each(data, function(index, nugget) {
        _roots.push(nugget);
      });
      return _roots;
    }).fail(function(xhr, textStatus, thrownError) {
      console.log(thrownError.message);
    });
  }

  return {
    roots: getRoots
  };
})(this,document,jQuery);

我的错误（来自 Chrome 的开发者工具控制台）：

myObj.roots()
undefined

Answer 1

您的“getRoots”函数不返回任何内容。使用 $.ajax(successCallback) 或 $.ajax.done() 模式是一回事。你没有推迟任何事情。 如果没有回调、事件或承诺，你就无法做到这一点。 回调和事件基本相同，只有后者允许更好的架构解耦（非常有争议的事实）。 Promise 意味着您可以编写 var x = getRoots() 并且 x 将是未定义的，直到浏览器从服务器返回响应。您的应用程序必须考虑到这一点。因此，您要么开始考虑异步模式（回调、事件）进行编码，要么设计能够优雅地处理空值/未定义值的应用程序。

使用回调：

function getStuff(callback) {
    $.ajax(...).done(function(data) {
        // maybe process data?
        callback(data);
    });
}

getStuff(function(data) {
    // this is where I can use data
});

这样你可以在一个单独的模块中编写你的 getStuff 方法，比如“DataService”，这样 MVC 逻辑就不会被污染。