How can I use angularjs promise chain in a service and controller?

Question

I found this plnkr link on the web but I need use it with 2 or 3 more ajax calls which doesn't require an argument from the first ajax call. How can I do it with error handling?

var app = angular.module("app", []);

app.service("githubService", function($http, $q) {

  var deferred = $q.defer();

  this.getAccount = function() {
    return $http.get('https://api.github.com/users/haroldrv')
      .then(function(response) {
        // promise is fulfilled
        deferred.resolve(response.data);
        return deferred.promise;
      }, function(response) {
        // the following line rejects the promise 
        deferred.reject(response);
        return deferred.promise;
      });
  };
});

app.controller("promiseController", function($scope, $q, githubService) {

  githubService.getAccount()
    .then(
      function(result) {
        // promise was fullfilled (regardless of outcome)
        // checks for information will be peformed here
        $scope.account = result;
      },
      function(error) {
        // handle errors here
        console.log(error.statusText);
      }
    );
});

http://plnkr.co/edit/kACAcbCUIGSLRHV0qojK?p=preview

@WorkWe I mean more, not different, I have fixed the question now. — Sam
– Sam, Commented Jun 6, 2016 at 7:50
you could use $q.all to wait till all promise get resolved like $q.all([promise1, promise2]).then(funtion(data){ //success }) — Pankaj Parkar
– Pankaj Parkar, Commented Jun 6, 2016 at 7:53
also this code is using an anti-pattern, $http returns a promise so there is no reason to wrap it inside a deferred. — Claies
– Claies, Commented Jun 6, 2016 at 7:58
@PankajParkar is correct and honestly a quick google for $q.all example gives what you need ( First result on google : jsfiddle.net/jsengel/mc3p01nb ) — DarkUrse
– DarkUrse, Commented Jun 6, 2016 at 7:59

Hitesh Kumar · Accepted Answer · 2016-06-06 07:56:09Z

1

You can use $q.all

var promises=[
$http.get(URL1),
$http.get(URL2),
$http.get(URL3),
$http.get(URL4)
];

$q.all(promises).then(function(response){
console.log('Response of Url1', response[0]);
console.log('Response of Url2', response[1]);
console.log('Response of Url3', response[2]);
console.log('Response of Url4', response[3]);
}, function(error){

});

I have forked your plunkr with $q

answered Jun 6, 2016 at 7:56

Hitesh Kumar

3,7289 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TappIt Development · Accepted Answer · 2016-06-06 08:03:20Z

First you should make deferred variable local for each ajax call you want to return a promise. So, you have to create 2-3 functions (as many as your ajax calls) and keep them in an array. Then you should use:

$q.all([ajax1,ajax2,ajax3]).then(function(values){
    console.log(values[0]); // value ajax1
    console.log(values[1]); // value ajax2
    console.log(values[2]);}); //value ajax3

example:

function ajax_N() {
   var deferred = $q.defer();

    http(...).then((response) => {
      deferred.resolve(response);
   }, (error) => {
      deferred.reject(error);
   });

   return deferred.promise;
}

$q.all([
        ajax_1,ajax_2,ajax_3
     ]).then(function(values) {        
          console.log(values); 
          return values;
        });

Huy Chau · Accepted Answer · 2016-06-06 07:58:19Z

Use $q.all in this case. It will call getAccount and getSomeThing api same time.

var app = angular.module("app", []);

app.service("githubService", function($http, $q) {

  return {

    getAccount: function () {
      return $http.get('https://api.github.com/users/haroldrv');
    },

    getSomeThing: function () {
      return $http.get('some thing url');
    }
  };

});

app.controller("promiseController", function($scope, $q, githubService) {

  function initData () {
    $q.all([githubService.getAccount(), githubService.getSomeThing()])
      .then(
        function (data) {
          $scope.account = data[0];
          $scope.someThing = data[1];
        },
        function (error) {

        }
      );
  }
});

Collectives™ on Stack Overflow

How can I use angularjs promise chain in a service and controller?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related