Issue with AngularJS promises within a factory

Question

I have an angularjs factory like this:

'use strict';

angular.module('frontRplApp')
    .factory('paymentService', function ($rootScope, $http, config, tools) {
        var urlBase = config.baseUrl;
        var paymentService = {

            response: {},

            create: function () {

                var args = {};

                return $http.post(urlBase + 'api/investor/payment/create', args);
            }
    });

And I intend to use it inside a controller like this (the important issue is being to do something different if all went well or if there was an error)

$scope.order = function () {
            console.log('PaymentCashCtrl.order');
            $scope.disabledButtons.submitCashOrder = true;

            paymentService.create()
                    .then(
                            function (response) {
                                // do something with response


                            }, function (error) {
                                // do something with an error
                        }));
        };

However my issue is that Id like to update some of the paymentService fields as the response of the $http.post is resolved and then return the promise so that the function(response) and function(error) callbacks in the controller keep working.

I tried with something like:

return $http.post(urlBase + 'api/investor/payment/create', args)
                        .then(function(response){
                            console.log(response);
                            this.response = response;
                            return response;
                        });

But it doesnt work since the function(error) handler in the controller is never called.

I want to use my handlers in the controller but also make some updates when the $http.post response is resolved.

Thanks.

try to return `$http.post(urlBase + 'api/investor/payment/create', args)` only this from the post call and in controller you can use same then and error callback other wise use `$q` recommended — Jayant Patil, Jun 08 '17 at 17:04

CodeWarrior · Answer 1 · 2017-06-08T17:12:30.883

Use $q

Change your factory code to this:

angular.module('frontRplApp')
    .factory('paymentService', function ($rootScope, $http, config, tools, $q) {
        var urlBase = config.baseUrl;
        var paymentService = {

            response: {},

            create: function () {
                var deferred = $q.defer();
                var args = {};

                $http.post(urlBase + 'api/investor/payment/create', args)               
                .then(function(response){
                        console.log(response);
                        paymentService.response = response;
                        deferred.resolve(response);
                    }, function (error) {
                         deferred.reject(error);
                    });
                return deferred.promise;
            }
         };

      return paymentService;
    });

score 1 · Accepted Answer · answered Jun 08 '17 at 17:04

in the factory, you need to return the functions paymentService object. also, don't resolve the promise inside the factory. resolve it in the controller.

.factory('paymentService', function($rootScope, $http, config, tools) {
    var urlBase = config.baseUrl;
    var paymentService = {

        response: {},

        create: function() {

            var args = {};

            return $http.post(urlBase + 'api/investor/payment/create', args);
        }
    }

    return paymentService;
});

$scope.order = function() {
    console.log('PaymentCashCtrl.order');
    $scope.disabledButtons.submitCashOrder = true;

    paymentService.create()
        .then(
            function(response) {
                // do something with response


            },
            function(error) {
                // do something with an error
            }));
};

Thanks! But thats precisely what Im doing now. Im interested on setting the response field with the response returned by my backend and I do `paymentService.response = response` inside the `function(response)` callback. However I dont like it very much. I feel like the service should update its own field and then allow the controller to handle the response or the error. Thats what Im trying to achieve. — Jonathan, Jun 09 '17 at 06:02

Issue with AngularJS promises within a factory

2 Answers2