AngularJS resolving $http promise too late

Question

I've written an AngularJS factory, profileService, that handles setting/getting user profile info. Its getProfile method calls my web API, is returned a JSON object with the user's data, and resolves the $http.get promise with that data. This particular promise is being used in a login method which is a member of an authentication factory. The block of code within login is in the midst of returning its own $http.post promise (it's requesting a token). The idea is to retrieve and locally cache the user's profile data upon login.

The issue is that the $http.get promise is resolving too late. That is, in my console output, the call shows as resolving to nothing (undefined), immediately followed by getProfile's inline output showing a successful profile object retrieval. Calling a variable that's stored the resolved promise also yields undefined.

Based on my research, I'm leaning towards the issue being me not thinking about promises correctly. Any help in understanding where I went wrong is greatly appreciated!

Code: profileService.getProfile(userName):

profileService.getProfile = function(userName) {
    return $http.get(ntSettings.apiServiceBaseUri + '/api/Profile/GetProfile?userName=' + userName)
        .then(function(response) {
            return response.data;
        });
};

Code: authService.login() calling getProfile

var profileService = $injector.get('profileService');
var userProfile = {};

profileService.getProfile(loginData.userName)
    .then(function(response) {
        userProfile = response;
        console.debug("authSvc -> login -> getProfile: Got profile data:", response.userProfile);
    }, function(error) {
        console.error("authSvc -> login: Unable to fetch profile", error);
    });
console.debug("authSvc -> login: Displaying profile object", response.userProfile);

Console debug output showing issues

authSvc -> login: Showing profile object: undefined
authSvc -> login -> getProfile: Got profile data: Object {FirstName: "John", LastName: "Doe", Birthday: "2015-05-06T04:00:00", Gender: 0, Location: "New York, NY"}

[This question](http://stackoverflow.com/questions/15604196/promises-in-angularjs-and-where-to-use-them) might help you to understand how the promises work — Julien, May 06 '15 at 08:47
you have a type error, this should be userProfile = res and res.userProfile — Bazinga, May 06 '15 at 08:47
@JsIsAwesome Whoops! That mistake is just from me manually editing that line to reflect a last-minute code change I made before submitting my question. The code actually resembles your suggestion. — ethansena, May 06 '15 at 09:00

score 0 · Answer 1 · answered May 06 '15 at 08:48

You need to put the logic to handle the result inside the .then() block, the "displaying profile object" logging is outside of the http-request-response part of the application. You can think of it as a different execution thread that is indepently run and no guarantees of 'before' can be assumed.

AngularJS resolving $http promise too late

1 Answers1