JS模块模式中的AJAX

Question

我正在使用JS中的模块模式创建一个应用程序。我创建了两个模块，我有以下代码：

var dataController = (function () {
var request = new XMLHttpRequest();
var getFilmes = function () {
request.onreadystatechange = function() {
if(request.readyState === 4) {
if(request.status === 200) {
var obj = JSON.parse(request.responseText);
return obj; 
} else {
console.log('An error occurred during your request: ' +  request.status + ' ' + request.statusText);
} 
}
}
request.open('Get', 'http://localhost:8080/api/filmes/5b8947446f506266bc522f38');
request.send();
}
return {
filmes: function (){
return getFilmes();
}
};
})();
var controller = (function (dataCtrl) {
var preencheFilmes = function(){
var obj = dataCtrl.filmes();
console.log(obj);
}
return {
init: function(){
console.log("APP START");
preencheFilmes();
}
};
})(dataController, UIController);

controller.init();

问题是当我在"init"中调用preencheFIlmes时，我无法从AJAX获得响应。但我可以在数据控制器中得到结果。

有人可以帮助我吗？我正在学习如何使用这种模式。

非常感谢。

Answer 1

你的函数getFilmes()是异步的，不返回任何内容。一个简单的解决方案是添加如下回调参数：

var getFilmes = function(callback) {
request.onreadystatechange = function() {
if(request.readyState === 4) {
if(request.status === 200) {
var obj = JSON.parse(request.responseText);
callback(obj); // <-- calls the callback function
} else {
...
} 
}
}
...
}

然后，当您想要获取结果时，可以传递匿名回调函数：

var preencheFilmes = function(){
dataCtrl.filmes(function(obj) {
console.log(obj);
});
}

另一种选择是使用 async/await 功能，请参阅 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function