[jQuery] 非同期通信後に別のスクリプトを実行する方法

2017/12/10

1 min read

背景

既存のレガシープロダクトにて、「エンドポイントの異なる複数の XHR 通信をした結果を元にスクリプトを実行したい」という要件があった。

具体的に云うと以下のような流れ。

記事データを n 件取得
取得した記事データ群からカルーセルを作成

方法

var results = [];

// 1. 複数のXHR通信を行う処理
function summarize() {
  var ids = [1, 2, 3, 4, 5];
  var promises = [];

  $.each(ids, function (i, value) {
    var deferred = $.Deferred();
    promises.push(
      $.ajax({
        method: "GET",
        url: "https://jsonplaceholder.typicode.com/posts/" + value,
        success: function (data) {
          results.push(data);
        },
        complete: function () {
          deferred.resolve();
        },
      })
    );
  });

  return promises;
}

$.when.apply($, summarize()).then(function () {
  // 2. XHR通信後に実行したい処理
  console.log(results);
});

既に jQuery で組まれたサイトであった為、そのまま jQuery の$.Deferred(),$.whenを使用した。

参考

Edit on GitHub