AJAX в шаблоне модуля JS

Я создаю приложение, используя шаблон модуля в 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.info('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.info(obj);

    }

    return {
        init: function(){
            console.info("APP START");
            preencheFilmes();
        }
    };

})(dataController, UIController);


controller.init();

Проблема в том, что я не могу получить ответ от AJAX, когда вызываю preencheFIlmes в "init". Но я могу получить результат в dataController.

Кто-нибудь может мне помочь? Я учусь работать с этим шаблоном.

Большое спасибо.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info(obj);
    });
}

Другой вариант - использовать функцию async / await, см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Другие вопросы по теме