How to get response from service on controller

Question

I'm trying to separate the $http.post() call into a ".factory()", But would like to fetch the response which is coming async on the controller. Is there a way of doing that?

Controller:

 Login.post($scope.user);

Factory:

 .factory( 'Login' , function($http,SERVERURL){
    var serverUrl = SERVERURL;

    return {
        'post' : function(user){
            $http.post(serverUrl+'/login', user).
                then(function(response) {
                    console.log(response);
                }, function(response) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
                });    
        }
    };
})

There is a .then() but I want that on the controller, so I can behave accordingly. Thank you!

Answer 1

Basically you need to return the $http.post promise, and from success function you could return a data that will return to the consumer of this method. So that you could easily call the factory method from controller & inside .then function of that call you could have success and error function.

Code

.factory('Login', function($http, SERVERURL) {
     var serverUrl = SERVERURL;
     return {
         'post': function(user) {
             return $http.post(serverUrl + '/login', user).
             then(function(response) {
                 console.log(response);
                 return response.data; //return data from here
             }, function(response) {
                 // called asynchronously if an error occurs
                 // or server returns response with an error status.
             });
         }
     };
 })

Controller

Login.post().then(function(data){ //success function
    console.log(data)
}, function(error){ //error function
    console.log(error);
})

Answer 2

Angular's $http methods return a Promise.

The $http API is based on the deferred/promise APIs exposed by the $q service.

Factory

Your method post is not yet returning anything but can quite simply return the Promise which is created by calling $http.post :

.factory('Login' , function($http, SERVERURL){
    var serverUrl = SERVERURL;

    return {
        'post' : function (user) {
            return $http.post(serverUrl + '/login', user)
//          ^^^^^^
                .then(function (response) {
                    console.log(response);
                    return response.data;
                }, function (response) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                });
        }
    };
});

Controller

Then consume the result of the returned Promise by calling then on it:

Login.post($scope.user).then(function (res) {
    // do something with `res`...
});

Answer 3

You could add a callback param.

.factory( 'Login' , function($http,SERVERURL){
var serverUrl = SERVERURL;

return {
    'post' : function(user, callback){
        $http.post(serverUrl+'/login', user).
            then(function(response) {
                console.log(response);
                callback(null, response);
            }, function(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
                callback(response);
            });    
    }
};
})

And your controller will become:

Login.post($scope.user, function(err, response) {
  if(err) {} //do something if there is an error
  // or deal with the response
});

Answer 4

To return any response to controller just do:

return {
    'post' : function(user){
        return $http.post(serverUrl+'/login', user);
    }
};

In your controller you will already call .then()