Angular Promise not running synchronously

Question

I have the following code in my javascript controller. The functions work when called independently and asynchronously from the view. However I want to call them synchronously on page load as the returning value from the first function is used in the call for the second function

$scope.function1= function () {
    $http({
        url: '/Class/method1/',
        method: 'GET'
    }).success(function (data) {
        $scope.mygrid= data.data;
        $scope.myvalue= $scope.mygrid[0];
    });
};

$scope.function2= function () {
    $http({
        url: '/class/method2/',
        method: 'POST',
        params: { myValue: $scope.myvalue }
    }).success(function (data) {
        $scope.myValue2 = data.data;
    });
};

 var initialize = function () {
    var defer = $q.defer();
    defer.promise
        .then(function() {
           $scope.function1();
        })
        .then(function() {
           $scope.function2();
        })
defer.resolve();
  }; 
initialize();

On the second call $scope.myvalue is null. Data has been returned from function one so the only thing I can think of is that function2 is being called too early. Any pointers? :-)

Promises are never synchronous. [Promises are no magic](http://stackoverflow.com/a/22562045/1048572). You need to `return` them from the `then` callbacks, and from your scope `functionN`s, otherwise they can't know that you want to wait for anything. — Bergi, Apr 14 '16 at 11:07
if you want function2 to run after function1, it should be call on success of function 1 or somewhere else, after checking function1 returned the expected data. — DIEGO CARRASCAL, Apr 14 '16 at 11:12

score 1 · Accepted Answer · answered Apr 14 '16 at 11:10

The promise in initialize runs synchronously. While $http requests don't. This results in calling $scope.function2 without waiting for a promise in $scope.function1 to resolve.

It should be

$scope.function1= function () {
    return $http...
};

$scope.function2= function () {
    return $http...
};

In this case deferred promise is antipattern, and initialize should be as concise as that:

 var initialize = function () {
    return $scope.function1().then(function() {
           return $scope.function2();
    })
  };

score -1 · Answer 2 · answered Apr 14 '16 at 11:06

$http({
        url: 'url',
        method: 'GET'
    })

this also is kind of one promise so it will run async.

$scope.function1= function () {//3rd step
    $http({
        url: '/Class/method1/',
        method: 'GET'
    }).success(function (data) {
        $scope.mygrid= data.data; //this run as asyn after response recived
        $scope.myvalue= $scope.mygrid[0];
    });
};

$scope.function2= function () { //5th step
    $http({
        url: '/class/method2/',
        method: 'POST',
        params: { myValue: $scope.myvalue }
    }).success(function (data) {
        $scope.myValue2 = data.data; //this run as asyn after response recived
    });
};

 var initialize = function () {
    var defer = $q.defer();
    defer.promise
        .then(function() {
           $scope.function1(); //2nd step
        })
        .then(function() {
           $scope.function2(); //4th step
        })
defer.resolve(); //1st step
  }; 
initialize();

Angular Promise not running synchronously

2 Answers2