javascript - ajax 调用后从 Javascript 模块返回值

Question

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

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

我正在关注this SO post在构建我的 ajax 调用时，我使用延迟对象在调用完成后处理我的数据。还有一些关于 Javascript 模块模式的教程，例如 this和 this 。从外部模块内的私有(private)模块返回值似乎相当简单——但是，我总是将 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 ，你就无法做到这一点。 回调和事件基本上是相同的，只是后者允许更好的架构解耦(非常有争议的事实)。 Promise 意味着您可以编写 var x = getRoots() ，并且 x 将处于未定义状态，直到浏览器从服务器返回响应。您的应用程序必须考虑到这一点。因此，您要么开始考虑异步模式(回调、事件)进行编码，要么设计能够优雅地处理 null/未定义值的应用程序。

使用回调:

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 逻辑就不会受到污染。