javascriptで複数のcsvファイルを読み込んでから次の処理をやりたい(callbackがうまくいきません)

Question

やりたいことは、複数のcsvファイルを読み込んで、配列に入れてからcallbackの処理をやりたいと考えています。
callbackではこの二つの配列を使った処理をする。
しかしうまくきません。以下がその該当箇所です。XMLHttpRequestの使い方に慣れていないということもあって、見にくいソースになっているかもしれません。申し訳ありません。

function csvData(dataPathSV,dataPathL,callback) {

    const requestSV = new XMLHttpRequest(); // HTTPでファイルを読み込む
    const requestL = new XMLHttpRequest();
    var responseSV;
    var responseL;
    requestSV.addEventListener('load', (event) => { // ロードさせ実行
        responseSV = event.target.responseText; // 受け取ったテキストを返す
    });
    requestSV.open('GET', dataPathSV, true); // csvのパスを指定
    requestSV.send();

    requestL.addEventListener('load', (event) => { // ロードさせ実行
        responseL = event.target.responseText; // 受け取ったテキストを返す
    });
    requestL.open('GET', dataPathL, true); // csvのパスを指定
    requestL.send();

    loadCsvData(responseSV,responseL,callback);
}

function loadCsvData(dataSV, dataL, callback){
  console.log(dataSV);
  const dataString = dataSV.split('\n'); //改行で分割
  for (let i = 1; i < dataString.length; i++) { //一番最初の行は飛ばす
      vocabPosition[i] = dataString[i].split(',');
  }
  dataString = dataL.split('\n'); //改行で分割
  for (let i = 1; i < dataString.length; i++) { //一番最初の行は飛ばす
      resultLDAArray[i] = dataString[i].split(',');
  }
  callback();
}

このままではdataSVになにも入っていないので、split('\n')ができないって怒られます。
何か良い方法はありますでしょうか。
よろしくお願いいたいします。

Comments

[hentaiman]

前の質問（https://teratail.com/questions/305506）でアドバイスした内容調べたか？って聞きましたよね？
それを無視して目先の回答コードに釣られるとこうなります。
理由があってアドバイスしてるんだからまず教えた内容調べてください

例の回答をした人は理解をしているからそれでも問題無いだけで、実際にはバッドプラクティスです。

[oika77]

承知いたしました。調べてみます。

Answer 1

Promiseで処理するか、fetchのチェーン内で処理してください

Comments

[oika77]

ありがとうございます！！

Answer 2

1. 並列に読む

2つのxhrは、ネットワークやサーバー状態でレイテンシの違いがあり、読み込み完了順が固定しないので複数データを全てを受け取ったか確認する処理が必要になります。また、１つでも完了しない場合にはcallbackが呼ばれないため、別途、リトライチェック（onerrorを定義するなど：ここでは省略）が必要

ベタ書きすると、次のような形

var rslts = {
  data1: null,
  data2: null
};
function cmplAll () {
  return "data1" in rslts && "data2" in rslts;
}

var xhr1 = new XMLHttpRequest();
xhr1.onload = function( evt ) {
  rslts.data1 = evt.target.result;
  if( cmplAll () ) {
    // callback ( rslts を参照すると全データを読み込んでいる )
  }
}
xhr1.open(/* omitted */);
xhr1.send()

var xhr2 = new XMLHttpRequest();
xhr2.onload = function( evt ) {
  rslts.data2 = evt.target.result;
  if( cmplAll () ) {
    // callback ( xhr1 の例に同じ )
  }
}
xhr2.open(/* omitted */);
xhr2.send()

※ここでは xhr はインスタンスを使い捨てることから、onload プロパティで書いています。

2. シーケンシャルに読む

Lhankor_Mhy さんの回答と同じで、解りやすいのが特徴です。

var xhr1 = new XMLHttpRequest();
xhr1.onload = function( evt1 ) {
  var rslt1 = evt1.target.result;

  var xhr2 = new XMLHttpRequest();
  xhr2.onload = function( evt2 ) {
    var rslt2 = evt2.target.result;
    // rslt1, rslt2 が得られたタイミングなので callback
  }
  xhr2.open(/* omitted */);
  xhr2.send()
}
xhr1.open(/* omitted */);
xhr1.send()

3. Promise によるフロー制御

fetch を覚える。（並列読み込みも Promise.all() でシンプルに記述できます）

Comments

[oika77]

わかりやすく、ありがとうございます。

Answer 3

コールバック関数はloadイベントリスナの中から呼ぶべきものです。

    requestSV.addEventListener('load', (event) => { // ロードさせ実行
        loadCsvData(...);
    });

ただ、この場合、両方のイベントが終わっていないといけないので、フラグを使うなどして両方のイベントの発火を条件として loadCsvData関数を呼んではどうでしょうか。

---

Promise.all() を使った方がコードがわかりやすくなるとは思います。

Comments

[oika77]

ありがとうございます。