AngularJSの$qサービスを使ってhttpリクエストを複数実行

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

デモとコードサンプルはこちら
 

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


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

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

(2)$qサービスのallメソッド


 
$qサービスのallメソッドで複数のpromiseを一つのpromiseとして集約して処理できます。
 
個々のpromiseで実行された結果を集約して一つのpromiseオブジェクトをリターンします。
 
例)3つの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);
    });
  });
};

(3)サンプルコード


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

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です