Проблемы с асинхронными запросами в JavaScript

Оффтоп javascript
1

Столкнулся с серьезной проблемой при работе с асинхронными HTTP запросами

Уже третий день не могу разобраться с одной задачей. Делаю несколько AJAX запросов для получения данных из XML файлов. Проблема в том, что когда я вызываю функцию fetchData(), она должна возвращать результат (переменную resultData), но вместо ожидаемого значения получаю undefined.

Странно то, что внутри самой функции fetchData() через alert() вижу правильное значение, но когда пытаюсь присвоить результат переменной mainContent, получается пустота.

Вот упрощенный код который использую:

(function() {
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            processData(httpRequest);
        }
    };
    httpRequest.open("GET", "data1.xml", true);
    httpRequest.send();
})();

function handleContent(callback) {
    mainContent = fetchData();
    alert(mainContent);
}

function fetchData() {
    request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            result = parseXML(request);
            alert(resultData);
            return resultData;
        }
    };
    request.open("GET", "data2.xml", true);
    request.send();
}

function parseXML(xhr) {
    var doc = xhr.responseXML;
    var content;
    var elements = doc.getElementsByTagName("Item");
    // обработка данных
    alert(content);
    return content;
}

function processData(xhr) {
    secondRequest = new XMLHttpRequest();
    var document = xhr.responseXML;
    var items = document.getElementsByTagName("Movie");
    secondRequest.onreadystatechange = function() {
        if (secondRequest.readyState == 4 && secondRequest.status == 200) {
            parseXML(secondRequest);
        }
    };
    secondRequest.open("GET", "data2.xml", true);
    secondRequest.send();
}

Помогите пожалуйста разобраться в чем может быть проблема!

2

Классика! fetchData() возвращает undefined, потому что XMLHttpRequest асинхронный, а ты делаешь return внутри колбэка. Используй промисы или передай колбэк в fetchData() и вызывай его в onreadystatechange.

3

Проблема в том, что ты пытаешься получить результат из асинхронной операции синхронно. fetchData() завершается сразу (возвращает undefined), а onreadystatechange срабатывает позже. Перепиши через async/await с fetch() или используй колбэки - передай функцию-обработчик в fetchData() и вызови её когда данные придут.