$ Http promise chain is not working properly

Question

I am new to angularjs. My goal is very simple. I want to make an ajax call to receive data, and, upon completion, I want to make a second call to get another data set, which depends on the information in the first set.

I am trying to do this using promise mechanisms so that I can use the chain instead of nested ajax calls and better retain the ability to have independent functions that I can bind together as needed.

My code resembles the following:

var promiseGetWorkTypes = function ($q, $scope, $http) { console.log("promiseGetWorkTypes"); return $q(function (resolve, reject) { $http({ method: 'GET', url: '/WorkTypes' }).then( function (payload) { console.log("Got workttypegroups") console.log(payload); $scope.WorkTypeGroups = payload.data; console.log("End of worktypegroups"); resolve(payload); }, function (payload) { reject(payload); }); }); }; var promiseGetRecentActivities = function ($q, $scope, $http) { console.log("promiseGetRecentActivities"); return $q(function (resolve, reject) { $http({ method: 'GET', url: '/RecentHistory' }).then( function (payload) { $scope.RecentActivities = payload.data; resolve(payload); }, // data contains the response // status is the HTTP status // headers is the header getter function // config is the object that was used to create the HTTP request function (payload) { reject(payload); }); }); }; var index = angular.module("index", []); index .controller('EntitiesController', function ($scope, $http, $timeout, $q) { promiseGetWorkTypes($q, $http, $scope) .then(promiseGetRecentActivities($q, $http, $scope)); } 

However, when I look at my debug console, I see that the call to "promGetRecentActivities" begins before the Ajax processing call to "promGetWorkTypes".

What am I missing or doing wrong here?

Answer 1

When you write

 promiseGetWorkTypes($q, $http, $scope).then(promiseGetRecentActivities($q, $http, $scope)); 

promiseGetActivites is invoked during the calculation of this string. You should be able to wrap the promiseGetActivities call in another function to defer the call until the first promise decides that the calls are executed sequentially:

 promiseGetWorkTypes($q, $http, $scope).then(function() { promiseGetRecentActivities($q, $http, $scope); }); 

The reason has nothing to do with what happens inside then , but because of the Javascript syntax. Following:

 myFunc1(myFunc2()); 

passes myFunc1 the result of calling myFunc2() , not a link to the myFunc2 function. Thus, logically myFunc2 should execute before myFunc1 . If you wrote

 myFunc1(myFunc2); 

then myFunc1 will get a link to myFunc2 , and therefore myFunc1 will be executed before myFunc2 (and in fact, myFunc2 will be executed only if somewhere inside myFunc1 there is code that calls it).

Defining an inline / function does not anonymously change this behavior. To pass the result of an anonymous function to another function, you can do the following

 myFunc1((function() { return 'something'; })()); 

which will first evaluate the anonymous function, since its return value of 'something' will be passed to myFunc1 . To pass a link to an anonymous function, you can do the following:

 myFunc1(function() { return 'something'; }); 

and then there will be myFunc1 , whether it will ever call the function passed to it.

Returning it to your question, your code:

 promiseGetWorkTypes($q, $http, $scope).then(promiseGetRecentActivities($q, $http, $scope)); 

passes the result from promiseGetRecentActivities($q, $http, $scope) to then , so it should be run before then starts and therefore, of course, did not wait for the promise to be promiseGetWorkTypes from promiseGetWorkTypes . What it seems to you is to pass it a function that, when called, starts promiseGetRecentActivities($q, $http, $scope) , which is what

 promiseGetWorkTypes($q, $http, $scope).then(function() { promiseGetRecentActivities($q, $http, $scope); }); 

does.

As a side note, it seems a bit unusual / complicated to pass $q , $http , etc. for various functions, but I think that maybe this is beyond the scope of this question to go through alternatives.