AngularJS unclear code execution

Question

Having a UserService with the following code:

this.result = function(credentials)
    {
        $http.post('http://localhost:8080/user/login', credentials).then(function (status) {
            return status;
        });
    };

And a LoginController with the following code:

$scope.doLogin = function()
    {
        var result = UserService.result($scope.credentials);
        alert(result);
    };

Why does the alert window popup before the POST is done/shown in firebug console, giving me an undefined message instead of a HTTP status code?

New Dev · Accepted Answer · 2015-02-01 20:36:28Z

2

This is because $http is an async operation. And so, it immediately returns a promise and then executes the handler at a later time. return status; returns the value to whoever handles the result.

In your case, this.result function doesn't return anything - it just executes the $http call, and so the result is undefined. Immediately afterwards the program executes alert(result).

The correct way is to follow through with promises until the end, and assign the value in the promise handler.

this.result = function(credentials)
{
    return  // return the promise
       $http.post('http://localhost:8080/user/login', credentials);
}

Then, in the controller, handle the promise:

$scope.doLogin = function(){
    UserService.result($scope.credentials)
       .then(function(result){
          alert(result);
       });
}

edited Feb 1, 2015 at 20:36

answered Feb 1, 2015 at 20:14

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

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

Comments

Danny Blue · Accepted Answer · 2015-02-01 20:11:58Z

1

Because $http is asynchronous. The alert would need to be in a callback function or in the promise itself. For example:

// Service
this.result = function(credentials) {
    return $http.post('http://localhost:8080/user/login', credentials);
};

// Controller
UserService.result($scope.credentials).then(function (status) {
    alert(status);
});

answered Feb 1, 2015 at 20:11

Danny Blue

4634 silver badges16 bronze badges

Comments

James Waddington · Accepted Answer · 2015-02-01 20:12:08Z

1

Because it's asynchronous. When you call UserService.result it will send the request and then return. Then you immediately do the alert.

Instead you should do the alert when the request completes, by returning the promise and putting your alert in .then().

answered Feb 1, 2015 at 20:12

James Waddington

2,9252 gold badges18 silver badges24 bronze badges

Comments

Shomz · Accepted Answer · 2015-02-01 20:17:48Z

1

Your function returns undefined (because it's not set to return anything). Don't be confused by what you return in the callback function - it never goes "out" to the original function.

The easiest fix is to return the whole $http call object (which returns a promise), and do the then() part in the controller.

answered Feb 1, 2015 at 20:17

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Collectives™ on Stack Overflow

AngularJS unclear code execution

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related