Как избежать синхронного XMLHttpRequest

Question

Я создаю расширение Chrome для нашей команды QA. При запуске расширение загружает файл конфигурации и использует его для установки свойств для глобального объекта. Вот код:

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

})(); 

код в других файлах, зависит от значения свойств «TeamID» и «gitHash». Вот почему я загружаю конфигурационный файл синхронно здесь. Но я получаю следующее предупреждение в консоли:

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

Как я могу сделать это без синхронного запроса AJAX? Я не хочу, чтобы другой код выполнялся до того, как эти значения будут установлены.

Answer 1

Просто используйте функцию обратного вызова.

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. 

}); 

Вот второй вариант с обратным утверждением:

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. 

});