Chaining asynchronous AJAX calls with Angularjs

Question

I'm using Angularjs and i have made this service with multiples functions that returns promises .

My AJAX service :

angular.module('yoApp')
    .factory('serviceAjax', function serviceAjax($http) {
      return{
      
        configDataSets:function(path){

          return $http.get(path);

        },
        fileList: function(site_url,dataSet,varName,region,date){
          return $http.get(site_url + "mwf/" + dataSet + "/" +varName + "/" + region + "/" + date + "/filelist/");
        },
        config: function(site_url,dataSet){
          return $http.get(site_url + "mwf/" + dataSet + "/config/");
        },

      }});

Controller code

I have already done something like this but as i may have more requests chained i think that's not the best way to do this :

serviceAjax.config(site_url,$scope.dataset).then function(data){
          $scope.config=data.data;
serviceAjax.configDataSets("images/configDatasets.json").then(function(data){

          $scope.configDatasets = data.data;
 
});
});

What i want to do is first Call in my controller config and then wait for it to finish then call configDataSets . what's the best way to do it, i have tried to look at $q and differed but i can't seem to figure out how to do it. Any help would be great!

see my answer - you can "chain" the .then calls without nesting them — Alnitak
– Alnitak, Commented Jan 19, 2016 at 11:15

Alnitak · Accepted Answer · 2016-01-19 11:48:23Z

1

Just use the .then method exposed by the promise:

serviceAjax.config(function(response) {
     // use response.data from first call
     ...
}).then(function() {
     return serviceAjax.configDataSets("images/configDatasets.json");
}).then(function(response) {
     // use response.data from second call
     ...
});

Also, consider using $resource instead of $http if your HTTP service follows typical RESTful usage.

edited Jan 19, 2016 at 11:48

answered Jan 19, 2016 at 11:11

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

3 Comments

azelix Over a year ago

The first call is working but the second one i got an undefined for the response parameter, and i tried reversing the order and each call works for the first time but the second one i got an undefined , my code serviceAjax.config(site_url,"all").then(function(data){ console.log(data); }).then(serviceAjax.configDataSets("images/configDatasets.json")).then(function(data) { console.log(data.data); });

Alnitak Over a year ago

you can't actually pass the result of serviceAjax.configDataSets("images/configDatasets.json") into .then - you have to pass a function - I'll amend my answer to show

azelix Over a year ago

Ah i see you need to first return the promise then use the ".then" method thank you very much !

Collectives™ on Stack Overflow

Chaining asynchronous AJAX calls with Angularjs

My AJAX service :

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My AJAX service :

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related