在Ajax調用後從Javascript模塊返回值

--- EDITED ---由於我的無知，這實際上和其他所有AJAX類型的問題一樣......需要進入正確的思維模式。留在這裏爲了後代的緣故，也許可以幫助其他人在發佈之前再次查看回調。在Ajax調用後從Javascript模塊返回值

所以我想說的是，我認爲這不是標準的「如何從ajax調用返回值」的問題，人們不等待異步調用完成。我認爲這是一個變量範圍與Javascript模塊模式的誤解，所以任何指導將不勝感激。

我在構建我的ajax調用時遵循this SO post，所以我在調用完成後使用延遲對象來壓縮我的數據。還有一些關於Javascript模塊模式的教程，如this和this。從我的外部模塊中返回一個私有模塊中的值似乎相當簡單 - 但是，我總是將myObj.roots（）定義爲undefined。儘管當我檢查斷點時它被定義爲一個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

來源

2013-08-22 user

您的「getRoots」函數不返回任何內容。使用$ .ajax（successCallback）或$ .ajax.done（）模式是一回事。你沒有推遲任何事情。沒有回調，事件或承諾，你無法做到這一點。回調和事件基本相同，只有後者允許更好的體系結構解耦（高度爭議的事實）。承諾意味着您可以編寫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邏輯不被污染。

來源

2013-08-22 21:57:28

好的，謝謝！我顯然仍然完全被回調弄糊塗，以及如何跨模塊使用它們......我會考慮這個/更多地嘗試這個......謝謝！ – user

在Ajax調用後從Javascript模塊返回值

回答

相關問題