Ajax通信で2つの完了を待ってから後続処理を実行する方法

Ajax通信で2つの完了を待ってから後続処理を実行する方法 技術ネタ

JavaScript で Ajax通信を行う際に、2つのデータ受信完了後に後続処理を実行する必要があったため、そのやり方について書きたいと思います。



やり方

fetch メソッドで非同期通信を行い、Promise を使って2つの完了を待つことで実現できます。

文章で説明してもわかりにくいと思うので、以下のサンプルソースを見て下さい。

サンプル

このソースでは、”data1.json” と “data2.json” の両方の受信完了を待って、21行目で後続処理(ここではログ出力)を実行しています。

"use strict";
function getJson(req) {
  return new Promise((resolve, reject) => {
    fetch(req).then(response => {
      if (response.ok) {
        response.text().then(content => {
          resolve(JSON.parse(content));
        });
      } else {
        reject();
      }
    });
  });
}

window.onload = e => {
  Promise.all([
    getJson(new Request("data1.json", { method: "GET" })),
    getJson(new Request("data2.json", { method: "GET" }))
  ]).then(json => {
    // TODO ここに後続処理を記述
    console.log(json[0]);
    console.log(json[1]);
  });
};

最後に

JavaScriptもどんどん新しくなって色々便利になっていますね。
今後も学習を続けたいと思います。