68799


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

[code]

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

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

[code]

    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;
    }
    
[/code]


CC BY-SA 4.0
2020-07-21T18:48:56.493
68798
2020-07-22T00:56:56.730
2020-07-22T00:56:56.730
3060
40856
question
javascript
window.onload時にJSONファイルを読み込みたいがエラーが消えません。


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

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

[code]

    xhr.open("get", filePath, false)
    
[/code]

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

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

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


CC BY-SA 4.0
2020-07-21T18:56:08.550
68799
2020-07-21T18:56:08.550
2376
68798
answer