js 非同期処理で複数のCSVファイルを取得したい。

Question

前提・実現したいこと

同期リクエストが非推奨とのことでしたので、
非同期処理で複数のCSVファイルを取得し、格納。
複数ファイルの格納が成功してから配列のデータを
加工、表示したいです。
（複数ファイルはそれぞれ別の加工をします。）

該当のソースコード

// グローバル変数
var data1 = [];
var data2 = [];
var flg = 0;

var domain = "ドメイン"
var path1 = "hogehoge1.csv";
var path2 = "hogehoge2.csv";

// 各CSV取得
getCsv(path1);
getCsv(path2);

function reqListener () {
	// 取得したやつがどっちか判断
	if(this.responseURL === (domain+path1)) {
		data1 = this.responseText;
		flg++;
	} else {
		data2 = this.responseText;
		flg++;
	}

	// 2つのファイルが取得できていたら
	if(flg >= 2) {
		// 加工＆表示
		console.log(data1);
		console.log(data2);
	}
}

// CSV取得
function getCsv(path) {
	var req = new XMLHttpRequest();
	req.addEventListener("load", reqListener);
	req.open("get", path);
	req.send();
}

一応上記ソースでも出来ていると思うのですが、
助長になってしまっているような気がしておりまして。。。
何か良い方法がありましたらご教授ください。
jqueryでも大丈夫です。

Answer 1

jQueryの方が簡単ですね
ざっとこんな感じ

$(function(){
  var csv1,csv2;
  var path1 = "hogehoge1.csv";
  var path2 = "hogehoge2.csv";
  console.log("start");
  var d = $.Deferred();
  $.when(
    $.ajax({url:path1}).done(function(data){csv1=data;d.resolve();}),
    $.ajax({url:path2}).done(function(data){csv2=data;d.resolve();})
    ).done(function(data){
      console.log(csv1);
      console.log(csv2);
      console.log("end");
    });
});

Comments

[zak]

ありがとうございます！