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($scope, tokenService) {
    tokenService.getTokens(function callbackFn(tokens) {
        $scope.tokens = tokens;
    });
});

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

    return {
        getTokens: getTokens
    };
});

This seems to me to be an Anti-Pattern. The $http service returns promises and having .then methods execute callback functions feels like an unhealthy inversion of control.

How does one re-factor code like this and how does one explain why the original way was not a good idea?

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.