javascript - 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 获得响应。但是我可以在 dataController 中得到结果。

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

非常感谢。

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);
    });
}

另一种选择是使用异步/等待功能，参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function