在ajax調用之后從Javascript模塊返回值

Question

---編輯---由於我的無知，這實際上與所有其他AJAX型問題相同...需要進入正確的心態。 為了后代的緣故，將其留在這里，也許可以幫助其他人在發布之前重新查看回調。

因此，我想先說一下，我認為這不是人們不等待異步調用完成的標准“如何從ajax調用返回值”問題。 我認為這是Java語言模塊模式對變量范圍的誤解，因此希望能提供任何指導。

我正在關注構建我的ajax調用的這篇SO文章 ，因此在調用完成后，我將使用延遲對象來處理數據。 還有關於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（）模式是一回事。 您不會推遲任何事情。 沒有回調，事件或承諾，您將無法做到這一點。 回調和事件基本上是相同的，只有后者允許更好的體系結構解耦（高度值得商fact的事實）。 承諾意味着您可以編寫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
});

這樣，您可以在單獨的模塊（例如“ DataService”）中編寫getStuff方法，這樣就不會污染MVC邏輯。