I am trying to return a data from custom angular JS service to the controller but it is always returning "{}"

Question

I have written a custom angular service that returns the session id after making a post-call to the WCF service. I can see on the chrome's network tab that the call has returned the session-id but when I try to return it through $http.post to the caller it returns "{}" object.

I've followed all the questions/answers related to this problem in stackoverflow, etc. but to no avail. I know there is a problem with the handling of promise that was returned by the post-call but I don't know and not able to pin-point what's wrong and where.

This is the custom service.

angApp.service('RPCService', function($http) {

    var url_login = 'http://xxxxxxx';

    this.Login = function(request) {

        return $http.post(url_login, request)
                            .then(function (result) {
                                return result.data;
                                },
                            function (data, status) {
                                console.log(data + status);
                            });

    };

This is the caller.

angApp.controller('exportController', ['$scope', 'RPCService', function ($scope, RPCService) {

    $scope.export = {};

    $scope.exportLogin = function(){

        var req = {
                    "SiteId" : $scope.export.xxx,
                    "UserName" : $scope.export.xxx,
                    "Password" : $scope.export.xxx
                    };

        $scope.export.sessionId = RPCService.Login(req);
    };

I expected the output as "SessionId" : "xxxxxxxx" but I am getting "{}"

Answer 1

$http.post returns a promise and that is what your service method is returning

Change

$scope.export.sessionId = RPCService.Login(req);

To

RPCService.Login(req).then(function(data){
   $scope.export.sessionId = data;
})

Answer 2

The signature of the error handler is wrong:

ERRONEOUS

  return $http.post(url_login, request)
                        .then(function (result) {
                            return result.data;
                            },
                        function (data, status) {
                            console.log(data + status);
                        });

BETTER

return $http.post(url_login, request)
 .then(function (result) {
    return result.data;
 },
  function (response) {
    var data = response.data;
    var status = response.status;
    console.log(data + status);
    //IMPORTANT re-throw error
    throw response;
});

It is important to re-throw an error in a rejection handler. Otherwise the rejected promise will be converted to a fulfilled promise with a value of undefined.

Answer 3

Adding the single parameter for error callback and then using the promise accessor with .then keyword on the caller fixed the issue. Following is the code.

this.Login = function(request) {

    return $http.post(url_login, request)
                        .then(function (result) {
                            return result.data;
                            },
                        function (response) {
                            var data = response.data;
                            var status = response.status;
                            console.log(data + " | " + status);
                            throw response;
                        });

};

On controller

RPCService.Login(req).then(function(data){
       $scope.export.sessionId = data.SessionId;
    });