Generic Angular Promise Service

Question

In building out a service layer within an Angular app I noticed a lot of code repetition to create promises therefore tried making a generic getPromise service as 90% of the promises are the same structure.

Although, when returning the promise from the service the function doesn't execute as normal - even though the returned object is the same.

Has anyone tried doing this? E.g.

angular.module('fooApp')
.service('promise', function promise($q, $http) {
    return {
        getPromise: function (url, data) {

            var deferred = $q.defer();

            $http.post(url, data)
            .success(function (data) {
                deferred.resolve(data);
            })
            .error(function (error) {
                deferred.reject(error);
            });

            return deferred.promise;
        }
    };
})

.service('foo', function foo(config, promise) {
    return {
        getFoo: function (userId) {
            var deferred = $q.defer();
            var url = config.svcUser + 'GetFoo';
            var data {
                userId: userId
            };

            $http.post(url, data)
            .success(function (data) {
                deferred.resolve(data);
            })
            .error(function (error) {
                deferred.reject(error);
            });

            return deferred.promise;
        },
        getFoo2: function (userId) {
            var url = config.svcUser + 'GetFoo';
            var data {
                userId: userId
            };
            return promise.getPromise(url, data);
        }
   }
})


.controller('AgenciesCtrl', function ($scope, agency) {

    agency.getFoo().then(function (agencies) {
        // does fire
    });

    agency.getFoo2().then(function (foo) {
        // does not fire
    });

    $scope.loadAgency = function (agencyId) {
        agency.getFullAgencyProfile(agencyId).then(function (agency) {
            $scope.agency = agency;
        });
    }

});

The issue seems fairly light in this small example but I'm planning on implementing 30+ services so it will reduce code repetition a lot if possible.

Answer 1

Here's what I normally do

In service method call:

return $http.post(url,data,{})
    .success(function(response){
        return response.data;
    })
    .error(function(response){
        // return error / status code
    }); // end $http.post

Then in controller:

var data = someSrvc.methodCall(); 

// you could also follow this up with
$q.when(data).then(...);

Or

In service:

return $http.post(url,data,{});

Then in controller (or where ever):

someSrvc.methodCall().then(function(response){
    // some success code
},function(response){
    // some error code
}); // end methodCall

$q.when make something into a promise example:

$q.when((someVal <= 0) && (someOtherVal > 0))
    .then(function(){
        // do something when condition is true
    });

I sometimes do this when I'm reusing an array but need it to be emptied, the fastest way to truncate an array is to pop off all its values NOT set its length directly to zero or set it to an empty array. I know that seems counter intuitive but look it up see for yourself. So any way something like this:

while(myArray1.length > 0)
    myArray1.pop();

while(myArray2.length > 0)
    myArray2.pop();

$q.when((myArray1.length <= 0) && (myArray2.length <= 0)).then(function(){
    // do something
});

Answer 2

You are right! Your code does repeat itself - this is called the deferred anti-pattern.

Promises abstract values that are temporal - that is: they're not available yet. Just like your code normally chains (one line after the next) so do promises with then.

Angular promises, as A+ promises offer a pretty modern implementation and everything Angular does asynchronously and is logically one time operation already returns a promise. This includes everything $http does, as well as $timeout, $resource and so on.

Your code could be much simpler:

angular.module('fooApp')    
.service('foo', function foo(config, promise) {
    return {
        getFoo: function (userId) {
            var url = config.svcUser + 'GetFoo';
            var data { userId: userId };
            return $http.post(url, data).then(function(resp){
                 // any validations you need on the response go here
                 return response.data;
            });
        }
   }
}).controller('AgenciesCtrl', function ($scope, foo) {
    foo.getFoo().then(function (agencies) {
        // does fire, and schedules a digest because it's an Angular promise
        $scope.someVar = agencies; // safe to do here, since a digest will happen
    }); 
});