0

ページロード時にJSONファイルを読み込みたいのですが、Chromeで以下のエラー(警告)がでてしまいます。
警告なので無視してもいいのですが、解消したいです。

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental

調べてみると非同期型行っていることが原因ということはわかりましたが、修正方法がわかりません。

window.onload = function () {
  var jsonData = loadJson(info.json);
}

function loadJson(filePath) {
  var jsonFile;
  var obj = new XMLHttpRequest();

  obj.open("get", filePath, false);
  obj.onload = function () {
    try {
      jsonFile = JSON.parse(this.responseText);
    } catch (e) {
      //alert("URLが壊れています。");
    }
  };
  obj.send(null);
  return jsonFile;
}

1 件の回答 1

0

調べてみると非同期型行っていることが原因ということはわかりましたが、修正方法がわかりません。

逆です.XHRでリクエストを同期実行しているためです.

xhr.open("get", filePath, false)

となっていますが,この第3引数で指定されているfalseによってリクエストは同期的に呼び出され,メインスレッドをブロックします.
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/open

これをtrueにする,あるいは引数自体をなくすことでリクエストは非同期で行われますが,return jsonFileで関数の呼び出し元にレスポンスを引き渡すことはできなくなります.

(補足) 最近ではPromiseやasync-awaitを使うことで同期的コードに近い感覚でのコーディングが可能になっています.単純な非同期コードであれば適切にコールバックをわたすだけでも十分です.
XMLHttpRequest の利用 - Web API | MDN

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。