如何避免同步 XMLHttpRequest

Question

I am building a Chrome Extension for our QA team. On startup, the extension loads a config file and uses it to set properties on a global object. Here is the code:

var qaExt = (function () {

    'use strict';

    // Properties fetched from config file
    var userHash, gitHash;

    function getBuildInfo() {

        var xhr = new XMLHttpRequest();
        xhr.overrideMimeType("application/json");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var buildInfo = JSON.parse(xhr.responseText);

                teamId = buildInfo.teamId;
                gitHash = buildInfo.gitHash;
            }
        };

        var path = ((vAPI.firefox) ? '/content' : '') + '/js/build_info.json';

        xhr.open("GET", path, false);
        xhr.send();
    }

    return {

        isDev: true,
        userSettings: {
            collapseAllowed: true,
            menuEnabled: true,
            experimental: false
        },
        teamId: teamId,
        gitHash: gitHash,
    };

})();

The code in the other files depends on the value of the properties 'teamId' and 'gitHash'. This is why I load the config file synchronously here. But I get the following warning in the console:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects on the end user's experience. For more help, 
check http://xhr.spec.whatwg.org/.

How can I do this without a synchronous AJAX request? I do not want the other code to execute before these values are set.

Answer 1

Just use a callback function.

function getBuildInfo(callback) {

    var xhr = new XMLHttpRequest();
    xhr.overrideMimeType("application/json");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var buildInfo = JSON.parse(xhr.responseText);

            teamId  = buildInfo.teamId;
            gitHash = buildInfo.gitHash;
            callback();
        }
    };

    var path = ((vAPI.firefox) ? '/content' : '') + '/js/build_info.json';

    xhr.open("GET", path, true);
    xhr.send();
}

getBuildInfo(function(){
 //ajax request success and done.

});

Here is the second option with return statement:

function getBuildInfo(callback) {

    var xhr = new XMLHttpRequest();
    xhr.overrideMimeType("application/json");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var buildInfo = JSON.parse(xhr.responseText);
            callback(buildInfo.teamId, buildInfo.gitHash);
        }
    };

    var path = ((vAPI.firefox) ? '/content' : '') + '/js/build_info.json';

    xhr.open("GET", path, true);
    xhr.send();
}

getBuildInfo(function(teamId, gitHash){
 //ajax request success and done.

});