使用AngularJS中的Promise进行$ http-calls的条件链接

Question

I have to execute three different $http-calls sequentially which depend on each other. Until now my working solution ist something like this

$http.get(".../1/...").success(function(){
    $http.get(".../2/...").success(function(){
        $http.get(".../3/...").success(function(){

        });
    });
});

Now there is a certain change to be made: The first call should be skipped if a condition is true. I could do it like this:

if(skipCallOne) {
    $http.get(".../2/...").success(function(){
        $http.get(".../3/...").success(function(){

        });
    });
} else {
    $http.get(".../1/...").success(function(){
        $http.get(".../2/...").success(function(){
            $http.get(".../3/...").success(function(){

            });
        });
    });
}

This obviously leads to massive code replication. I see that this could be reduced if i used propper functions for the particular $http-calls. But as I understand a better solution would be to use and chain the $http-promises properly, like this:

$http.get(".../1/...").then(function(){
    return $http.get(".../2/...");
}).then(function() {
    return $http.get(".../3/...");
}).then(function() {

});

But now my question is, how can I conditionaly skip the first call with the least code replication?

Answer 1

You can try this approach:

$q.when(skipCallOne || $http.get(".../1/..."))
  .then(function() {
    return $http.get(".../2/...");
  }).then(function() {
    return $http.get(".../3/...");
  }).then(function() {
});

Answer 2

You can wrap the $http.get calls in functions that test the condition and return the $http.get promise if the conditions apply or a pre-resolved promise if not.

function callOne() {
    if(condition) {
        return $http.get(".../1/...");
    } else {
        var deferred = $q.defer();
        deferred.resolve();
        return deferred.promise;
    }
}

callOne().then(function() {
    return $http.get(".../2/...");
})

Answer 3

I like to be able to see stuff like this working, so I put this little controller together to demonstrate the promises resolving, with a conditional $http.get running first. I don't claim that this is elegant or as clever as the other answers, though I think it is quite similar to Cristian's solution.

Note: One thing that may make this difficult to understand is answers to this question often show chaining $http calls which are only executed , and for the sake of simplicity, the values those calls are returning are ignored and it may not be immediately clear how to break things apart to actually get at the values.

Demo

app.controller('MainCtrl', function($scope, $q, $http) {
  $scope.x = true;

  var firstHttp = function() {
    var deferred = $q.defer()
    if($scope.x) {
      data = 'x was true'
       deferred.resolve(data);
    } else {
      $http.get('test.json')
      .then(function(data) {
        $scope.data1 = data;
        deferred.resolve(data);
      })
    }  
    return deferred.promise
  }

  $scope.myGetterFn = function() {
    firstHttp()
    .then(function(data) 
    {
      data.data ? $scope.data1 = data : $scope.datax = data;
      $http.get('test2.json')
    .then(function(data2) 
    {
        $scope.data2 = data2
        $http.get('test3.json')
    .then(function(data3) 
    {
          $scope.data3 = data3
    })
    })
    })
  }
});