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 ，你无法做到这一点。回调和事件基本相同，只是后者允许更好的架构解耦(值得商榷的事实)。Promises 意味着您可以编写 var x = getRoots() 并且在浏览器从服务器返回响应之前 x 将是未定义的。您的应用程序必须考虑到这一点。因此，您要么开始编码时考虑到异步模式(回调、事件)，要么设计能够优雅地处理 null/undefined 值的应用程序。

使用回调:

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