TransWikia.com

window.onload時にJSONファイルを読み込みたいがエラーが消えません。

スタック・オーバーフロー Asked on November 13, 2021

ページロード時に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;
}

One Answer

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

逆です.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

Answered by hinaloe on November 13, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP