非同期のxhrリクエストで値を返す方法は？

Question

loadFile.Openがtrue（async）に設定されているxhr（）関数の戻り値としてloadFile.responseTextを返す方法...同期（false）として要求を設定すると、値が返されます。私はこれがなぜ起こるのか理解していますが、非同期設定でこれを達成する方法があるのか​​疑問です。

loadFile.open("GET", url, true); // no response 

全体の機能：

function xhr(url, async){ 

    var data = ''; 

    var loadFile = new XMLHttpRequest(); 

     loadFile.overrideMimeType("application/json"); 

     loadFile.open("GET", url, false); // when true, no value is returned (of course) 

     loadFile.onreadystatechange = function() { 

      if (loadFile.readyState === 4 && loadFile.status == "200") 
      { 
       data = JSON.parse(loadFile.responseText); 

       return data; 
      } 
     } 

     loadFile.send(null); 

    return loadFile.onreadystatechange(); 
} 

私はこの答えを探していると、このHow do I return the response from an asynchronous call?を発見し、それが重複ではありませんました。

必要に応じて方向を完全に変更しても構いません。あなたは、実際の基本的な例や、それを達成するためにどのような方法を提案するのかを助けることができますか？

Answer 1

私はこれに答えるつもりで、これを複製として閉じます。この答えは、あなたの特定の問題の純粋な説明です。本当の答えは、複製を読み、理解することです。

ここで私は、重複の答えから関連部分をコピー＆ペーストするつもりです：

：

var result = foo(); 
// Code that depends on 'result' 

だからあなたのコードのように再構築しなければならない

foo(function(result) { 
    // Code that depends on 'result' 
}); 

なり

function xhr(url, callback){ 

    var data = ''; 

    var loadFile = new XMLHttpRequest(); 

     loadFile.overrideMimeType("application/json"); 

     loadFile.open("GET", url, false); // when true, no value is returned (of course) 

     loadFile.onreadystatechange = function() { 

      if (loadFile.readyState === 4 && loadFile.status == "200") 
      { 
       data = JSON.parse(loadFile.responseText); 

       callback(data); //// NOTE: this is how you return the value 
      } 
     } 

     loadFile.send(null); 

    loadFile.onreadystatechange(); 
} 

返された結果を使用する方法：

xhr(some_url, function (result) { 
    // use result here 

    // NO, it's not possible to get result outside this function 
    // If you really want you can pass it further to other functions: 

    do_something_with(result); 

    // but you can NEVER return it 
}); 

基本的にコードを再構成してコールバックに慣れる必要があります。

約束事のようなコールバックや、もっと新しいバージョンのjs async/await（約束を返す）がありますが、それらはすべてコールバックです。