APIで取得したJSON配列文字列をajax同期通信以外の方法で変数に格納する簡単な方法はありますか？

Question

JavaScriptで下記配列をDBからのAPIで取得したいです。

//読み込みたいデータ
var data1 = {};
    var data1 = [
       {id: "1",  code:"0010", name:"ケイコ"},
       {id: "2",  code:"0020", name:"ヨシコ"},
       {id: "3",  code:"0030", name:"アケミ"}
    ];
console.log(data1);

これらを参考に、AJAXの同期通信で取得できたのですが、
このやり方だとデベロッパーツールに
同期は非推奨との旨の警告がでるようです。
https://oshiete.goo.ne.jp/qa/8669319.html
http://qiita.com/mosa_siru/items/e0b6dc8c2dc05198f639

//■AJAX同期通信は、取得できるが、警告が出る
/* Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.  */
var hoge = {};
$.ajax({
  type: "GET", 
  url: "http://localhost:8888/app/staffs/jsonapi",
  async: false,
  success: function(data){
    hoge = data;
  }
});
console.log(hoge);

読み込みデータ数は最大で200件程度なので、
読み込み完了まで待つのでかまわないかと思うのですが、
警告を出さずに、手軽に配列を変数に
格納するにはどうしたらよいでしょうか？

または、データ２００件程度でも
がんばって非同期での実装をしたほうがよいのでしょうか？

アドバイスをいただければ幸いです。

Answer 1

そもそも ajax というのが「Asynchronous JAvascript + Xml」という頭字語であるように、「非同期通信が前提」なのです。
同期通信をするとその間 Web ブラウザは一切の処理を行えないので、折角のインタラクティブ性が失われてしまいます。
なので非推奨なのです。

ajax では非同期通信で、「通信が成功したとき」「通信がエラーになったとき」といったときにイベントが発生し、それを受けて処理をする、というのが基本です。

素の JavaScript で非同期通信をするのはいささか大変ですが（Webブラウザによって挙動が異なる）、jQuery はそれを隠してくれますからぜひ非同期通信を実装してください。

Comments

[maifukuhara]

非同期で実装します、ありがとうございました。

Answer 2

なぜ非同期が嫌なのかがわかりません。
むしろデータが読まれたタイミングで更新がかかるほうが
ストレスが少ないと思います
どうしても非同期でタイミングがとれないのであれば
DeferredやPromiseで処理すればよいかと思います

Comments

[maifukuhara]

データ取得後に行いたい処理があり、その際に用いる変数（取得した配列）が
非同期でないと、うまく格納できないと思っていた（他に方法を知らなかった）のですが、
データ取得完了後に実行されるFunctionに、やりたかった処理を埋め込むことで解決しました。