AngularJS service call from controller not working properly

Question

I've written a service Auth with a function is_authenticated() that returns $http.get('/api/users/is_authenticated')

When I visit the API endpoint in the browser, I see the proper JSON.

{"authenticated":true} when the user is authenticated, and false when the user is not.

However, my console.log() below returns false 100% of the time (and it also logs it twice, not just once).

What's the problem here?

var is_authenticated = false;

Auth.is_authenticated()
    .success(function(data) {
        is_authenticated = data.authenticated;
    });

console.log(is_authenticated);

Service:

.factory('Auth', function($http) {
    return {
        is_authenticated: function() {
            return $http.get('/api/users/is_authenticated');
        },

This has nothing to do with angular.. :) it is just an ajax call. See the answer in the previous comment you will get the clue and understand the concept. — PSL, Sep 28 '14 at 04:08
You are doing console.log before the success callback has been executed. Simple debugging should provide you that information. — PSL, Sep 28 '14 at 04:10
When I move the console.log() below the is_authenticated = data.authenticated, it logs undefined. — Billy Assim, Sep 28 '14 at 04:14
As other mentioned, the Authen method is asynchronous and thus, console log will output false. Please give more detail on what do you want to do after the authen is successful. Normally, you can call another function within the callback of that authen method. — MikeNQ, Sep 28 '14 at 04:34

score 2 · Answer 1 · answered Sep 28 '14 at 04:36

console.log() takes a reference to the object specified and immediately runs a (typically background) process to write it to the log. What it writes depends entirely on timing. You run into this a LOT with async calls - if you step through it with a debugger or set a breakpoint, it prints the correct value. If you run it raw, it fails. It's because it's executing before your network request has completed.

Move the console.log inside the success function:

Auth.is_authenticated().success(function(data) {
    is_authenticated = data.authenticated;
    console.log(is_authenticated);
});

You should also trap possible failures to this call as well. If you get any kind of error (like a CORS violation, which Chrome now enables by default) you'll never hit this code block and you'll still be scratching your head:

.error(function(data, status, headers, config) {
    console.log('Fail!');
});

Finally, note that although Factories are useful patterns, unless you're specifically making use of how they behave, you can usually save a line or two of code by making them a service instead. You don't need to return an object - you just set your properties and methods on 'this'.

This can be important as you build bigger services like authentication providers where you really want those to be singletons...

Jaydee88 · Answer 2 · 2014-09-28T04:47:52.073

0

One way is to use $timeout while accessing the data outside the success function. Just set a reasonable delay.
Another way is to use $broadcast inside the success() to signal the completion of the ajax call before you access the data, if you are accessing data elsewhere.

edited Sep 28 '14 at 04:47

answered Sep 28 '14 at 04:22

Jaydee88

66
1
7

AngularJS service call from controller not working properly

2 Answers2