AngularJSの$qサービスを使ってhttpリクエストを複数実行 | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

AngularJSの$qサービスを使ってhttpリクエストを複数実行する方法を確認しました。

デモとコードサンプルはこちら。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．$httpサービスのプロミスオブジェクトをチェーン
２．qサービスのallメソッド
３．サンプルコード

$httpサービスのプロミスオブジェクトをチェーン

$httpサービスはプロミスオブジェクトをリターンするので、このプロミスオブジェクトをチェーンして複数のhttpリクエストを順番に実行できます。
　
例）３つのhttpリクエストを順番に実行

$scope.chain = function() {
  $scope.results1 = [];
  $http.get("/ng/q_chain.php?first=5").then(function onSuccess(response) {
    $scope.results1.push(response.data);
    $http.get("/ng/q_chain.php?second=1").then(function onSuccess(response) {
      $scope.results1.push(response.data);
      $http.get("/ng/q_chain.php?third=3").then(function onSuccess(response) {
        $scope.results1.push(response.data);
      });
    });
  });
};

qサービスのallメソッド

$qサービスのallメソッドで複数のpromiseを一つのpromiseとして集約して処理できます。
　
個々のpromiseで実行された結果を集約して一つのpromiseオブジェクトをリターンします。
　
例）３つのhttpリクエストを集約してまとめて実行

$scope.all = function() {
  $scope.results2 = [];
  var first  = $http.get("/ng/q_chain.php?first=5"),
      second = $http.get("/ng/q_chain.php?second=1"),
      third  = $http.get("/ng/q_chain.php?third=3");

  $q.all([first, second, third]).then(function(result) {
    angular.forEach(result, function(response) {
      $scope.results2.push(response.data);
    });
  });
};

サンプルコード

①$httpサービスをチェイン
　
３つのhttpリクエストを一つずつ順番に実行し、１つのhttpリクエストの実行結果取得後にhttpリクエストを実行。
　
②$qサービスのallメソッドで３つのhttpリクエストを集約して実行
　
３つのhttpリクエストを結果の取得を待たずに続けて実行し、３つのhttpリクエストの実行結果を取得した段階で３つ結果を順番に集約して実行。
　
③$qサービスのallメソッドを使ってhttpリクエストをループ処理
　
配列データから取得したデータを使ってループ処理で動的に$httpリクエストを生成し、この$httpリクエストを$qサービスのallメソッドに登録し、３つのhttpリクエストを集約して実行。
　
デモとコードサンプルはこちら。

関連記事の目次

AngularJS

AngularJSの特徴、仕組み

ビルトインディレクティブ

サービス

カスタムディレクティブ

WordPressで使用