JavaScriptでファイルを同期して呼び出すAPIを呼び出す

Question

解決済み：各XMLHttpRequiest（）を再帰的に実行することで問題を解決しました。基本的に私のxhr.onloadの終わりに、私は別の要求をして、私が私のデータの終わりに到達したかどうかを積極的にチェックします。

私はJavaScriptでかなり新しく、D3ライブラリにある程度親しんでいます。 D3ライブラリを使用してコンピュータからCSVファイルを読み込み、XMLHttpRequest（）を使用してファイルからAPIに特定の情報を送信しようとしています。

私はJSONオブジェクトを返すAPIを呼び出すたびに、そのオブジェクトを後で使用するためにデータセットに格納します。私はデータセットを扱う前に私のCSVファイル全体を読み込んで処理するようにしようとしていますが、APIコールは非同期であるため問題に遭遇しています。

私のコードは次のようなものになります。そのまま

var myData = []; 

d3.csv("myFile.csv", function(data) 
{ 
    for (var i = 0; i < data.length; i++) 
     // Get appropriate data from data object 
     // Make API call with XMLHttpRequest() and store in myData array 
}); 

// Handle fully updated myData array here 

、私のコードは、現在、ほぼ瞬時に私のループを通過すると、すべてのAPIが非同期呼び出しを行うと、その後待たずに自分のデータ上で動作するように進み、何か更新する。

このデータセットを使用する前に、CSVファイルが処理され、すべてのAPI呼び出しが返されていることを確認する方法はありますか？私はコールバック関数と約束を試みましたが、成功しませんでした。

Answer 1

私はこの記事では答えがあなたにも約束のAPIを使用することができます d3: make the d3.csv function syncronous

を助けることができると思います。私たちのすべての要求は、当社のCBの関数を呼び出す前に最初に完了する必要があることをあなたが簡単なカウンタすべてこのコードはあるん

var counter = 0; 
var myData = []; 

d3.csv("myFile.csv", function(data) 
{ 
    for (var i = 0; i < data.length; i++){ 
    // Get appropriate data from data object 
    $.get("your/api/path", function(result){ 
     counter++; // this is important. It increments on each xhr call made. 
     myData.push(result); 
     if(counter === data.length) cb(myData); // This will check if the current xhr request is the last xhr request. If yes then call our cb function. 
    }); 
    } 
}); 

function cb(data){ 
    // This will run only when all the http requests are complete 
    // Do something with data 
} 

でこれを行うことができます

Answer 2

が、それは確認します（ここでは、あなたのさらなる書きます論理）。この方法は、すべてのxhr要求が完了したときにのみcbが実行されることを保証します。