jsonファイルを取得する関数の戻り値がundefinedになる

Question

前提・実現したいこと

javascriptでjsonファイルを取得したい

発生している問題・エラーメッセージ

戻り値がundefinedになる

該当のソースコード

console.log(getJSON());
//undefined

function getJSON() {
	var url = 'https://hogesite.com/hoge.json';
	var request = new XMLHttpRequest();
	request.onreadystatechange = function() {
		if(request.readyState === 4 && request.status === 200){
			console.log(JSON.parse(request.responseText)); //jsonファイルの中身は確認できる
			return JSON.parse(request.responseText);
		}
	}
	request.open('GET', url);
	request.send();
}

試したこと

console.logでのプリントデバッグ

補足情報（FW/ツールのバージョンなど）

IE11に対応させる必要があります。
開発環境 Windows10 Home(64bit) / Chrome バージョン: 89.0.4389.90（Official Build）

Answer 1

＞ IE11に対応させる必要

の時点で人の数倍学習と努力をする必要があることは理解していますか？

まずpromiseのpolyfillが必要です

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>

その上で

function getJSON() {
  var url = 'hoge.json';
  return new Promise(function(resolve){
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
      if(request.readyState === 4 && request.status === 200){
        resolve(JSON.parse(request.responseText));
      }
    }
    request.open('GET', url);
    request.send();
  });
}
getJSON().then(console.log);

Comments

[yambejp]

fetchとasync/awaitでちょいちょいでできることに、IE対応のため
こんな書き方をするのは無駄だと思いますよ・・・
これをするならIEは別JSで非同期ではない処理をするくらいの切り分けをした方がマシでしょう

[yambejp]

jQueryのほうがまだましかも・・・

function getJSON(){
var url = 'hoge.json';
var d=$.Deferred();
$.ajax({
url:url,
}).done(function(data){
d.resolve(data);
});
return d.promise();
};
getJSON().done(function(data){
console.log(data);
});

[edison]

ご指摘のとおりpromiseで解決しました。
IE対応についての助言もありがとうございました。
精進します。

Answer 2

return文がないからではないでしょうか。
関数で戻り値を返す場合にはreturnが必要です。

---

XMLHttpRequestを同期的に使う方法は、↓この記事がわかりやすいかもしれません。
Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する

Comments

[edison]

非同期処理の理解が足りなかったのですが記事の内容で理解できました。
ありがとうございました。