Why are Callbacks from Promise `.then` Methods an Anti-Pattern

Question

I have seen answers on StackOverflow where people suggest furnishing a callback function to an AngularJS service.

app.controller(\'tokenCtrl\', function($sco         


        

Answer 1

You should change it to

var getTokens = function() {
      return $http.get('/api/tokens');
    };

And, then in other module use

yourModule.getTokens()
  .then(function(response) {
    // handle it
  });

As to why it's an anti-pattern, I'd say that, first, it doesn't allow you to further chain your success/fail handler methods. Second, it handles the control of processing the response from caller-module to called module (which might not be super-important here, but it still imposes same inversion of control). And finally, you add the concept of promises to your codebase, which might not be so easy to understand for some of the teammates, but then use promises as callbacks, so this really makes no sense.

Answer 2

The code can be re-factored as follows:

app.controller('tokenCtrl', function($scope, tokenService) {
    tokenService.getTokens.then ( callbackFn(tokens) {
        $scope.tokens = tokens;
    });
});

app.factory('tokenService', function($http) {
    var getTokens = function() {
        //return promise
        return $http.get('/api/tokens').then (function onFulfilled(response) {
                //return tokens
                return response.data;
            }
        );
    };

    return {
        getTokens: getTokens
    };
});

By having the service return a promise, and using the .then method of the promise, the same functionality is achieved with the following benefits:

• The promise can be saved and used for chaining.

• The promise can be saved and used to avoid repeating the same $http call.

• Error information is retained and can be retrieved with the .catch method.

• The promise can be forwarded to other clients.