AngularJS factory function add promise

Question

I am creating a function inside angular factory. I need this function return promise. then I add others functionality .

    SPApp.factory('processing', ['$http', '$rootScope', '$q', function ($http, $rootScope) {
        function initialize($scope, status) {


    $http({
        method: 'GET',
        url: '/api/ApiCustomer/GetCustomerDetails'

    }).then(function (data) {
        if (data.data.ModelValue == null) {
            $rootScope.redirectToLogin();
        } else {
            $scope.CustomerInformation = data.data.ModelValue;


        }
    }).then(function () {
            $http({
                method: 'GET',
                url: '/api/ApiList/AccountTypeList'
                }).success(function (result) {
                $scope.accountTypeList = result;
                typeOfAccount = result;
            });

            // get currncy list

            $http({
                method: 'GET',
                url: '/api/ApiList/CurrencyList'
                }).success(function (result) {
                $scope.currencyList = result;

                //jQuery('#ProfileImage').attr('src', "/Content/Images/blank-avatar.jpg");
            });


            $http({
                method: 'GET',
                url: '/api/ApiList/BankListByUserType',
                }).success(function (result) {
                $scope.bankList = result;
            });

    });

};

return {
    initialize: initialize
}
    }]);

and how to call this function as a promise and use then

processing.initialize($scope, true).then(function(){
  console.log("hello world");
});

Now then is not working plz help if you know the process

Answer 1

You should return Promise from the factory

SPApp.factory('processing', ['$http', '$rootScope', '$q',   function ($http, $rootScope, $q) {
        function initialize($scope, status) {
            return $http({
                method: 'GET',
                url: '/api/ApiCustomer/GetCustomerDetails'
            });
        }

        return {
            initialize: initialize
        }
    }
]);

Consume output in controller method

processing.initialize($scope, true).then(function (data) {
    $scope.basicInfo = data.data.ModelValue.PersonalInformations[0];
});

---

As per comment initialize function has multiple http request you can use $q.all() method which will wait for all the promise to complete.

SPApp.factory('processing', ['$http', '$rootScope', '$q', function ($http, $rootScope, $q) {
        function initialize($scope, status) {
            var returnData = {},
            var a = $http({
                    method: 'GET',
                    url: '/api/ApiCustomer/GetCustomerDetails'
                }).then(function (response) {
                    returnData.basicInfo = response.data.ModelValue.PersonalInformations[0];
                });

            var b = $http({
                    method: 'GET',
                    url: '/api/ApiList/AccountTypeList'
                }).then(function (response) {
                    returnData.accountTypeList = response;
                });

            return $q.all([a, b]).then(function () {
                return returnData;
            });
        }

        return {
            initialize: initialize
        }
    }
]);

Answer 2

see the below link to understand the promise function in angular which help to solve this issue

https://docs.angularjs.org/api/ng/service/$q

Answer 3

You should

1. return promise instead of just executing it
2. Use promise chaining and process recieved data outside of the factory instead of passing $scope inside
3. Also $q service seems to be unused (not sure about your plans).

Factory code

    SPApp.factory('processing', ['$http', '$rootScope', function ($http, $rootScope) {
    function initialize(status) {
        return $http({
            method: 'GET',
            url: '/api/ApiCustomer/GetCustomerDetails'

        }).then(function (data) {
            return data.data.ModelValue.PersonalInformations[0];
        }
    }

    return {
        initialize: initialize
    }
}]);

Usage

processing.initialize(true).then(function(personalInformation){
  console.log(personalInformation);
});