Загрузка удаленных данных, кэширование и продолжение в JavaScript

Question

Базовый вариант использования. У меня есть глобальная переменная, в которой я храню удаленные данные. Если данных нет, я хочу загрузить их изначально, дождаться их загрузки и продолжить обработку. Я действительно не хочу использовать синхронный процесс, если мне не нужно.

Рассмотрим что-то вроде этого, где _companies является глобальной переменной ...

    if (_companies === undefined || _companies.length == 0) {
       loadExternalData();
    }
    // do something with the data in _companies

Я чувствую, что упускаю что-то очевидное. Я понимаю, что могу назвать async = false, но это похоже на обрыв. Я мог бы также поместить весь код в блок в функцию, сделать if..else, а затем вызвать функцию из loadExternalData (), а также в моем операторе else, но опять-таки это похоже на обрыв. Кажется, я должен быть в состоянии обернуть всю эту вещь в обратный вызов, но я не знаю, как это сделать.

Answer 1

Посмотрите на код ниже, включая комментарии. Код имеет ту же структуру, что и функции в вашем вопросе. Если что-то неясно, добавьте комментарий.

var companies; //Cache
function loadExternalData(callback){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){ //Set readystatechange event
        if(xhr.readyState == 4 && xhr.status == 200){ //Request finished: 200 OK
            callback(xhr.responseText); //Call callback func with data
        }
    }
    xhr.open("get", "http://example.com", true); //True = async
    xhr.send(null);
}

function parseData(data){
    if(data) {//If data is defined, set companies
        _companies = data;
    }
    if (typeof _companies == "undefined" || _companies.length == 0) {
       loadExternalData(parseData); //Pass callback function
       return; //No data, return function
    }
    //When the function reaches this point, _companies exist.
    //Normal function behavior
}

См. Также: MDN: использование XMLHttpRequest