Angular Catch method not working with $http get re

Question

I am trying to neatly manage service function calls from the controller while handling errors from the API.

However when I do the following, I still get this is showing even with 403 and 404 errors in my console even when the API throws back a 403 or 404.

I am assuming this could work if I added catchin my services file but I would prefer keep this managed from the controller. Is this possible?

Controller:

angular.module('EnterDataCtrl', []).controller('EnterDataController', ['$scope', 'Data', '$state', function ($scope, Data, $state) {
    vm = this;
    vm.getRules = function (e, rule_query, data) {
        if (e.keyCode == 13) {

            Data.getRules(rule_query,data).then(function (data) {
                console.log('this is showing even with 403 and 404 errors');
            }).catch(function(res) {
                console.log(res);
            });
        }
    }
}]);

Service:

angular.module('EnterDataService', []).factory('Data', ['$http', function ($http) {

    return {

        getRules: function getRules(rule_query,data) {
            var apiBase = apiUrl + 'get-rules';
            var config = {
                handleError:true,
                params: {
                    rule_query: rule_query,
                    data : data
                }
            };
            return $http.get(apiBase, config).catch(function () {});
        }

    }
}]);

Answer 1

When a rejection handler omits a throw statement, it returns undefined. This converts a rejected promise to a fulfilled promise that resolves to undefined.

To avoid unintended conversions, it is important to include a throw statement in rejection handlers.

app.service('Data', ['$http', function ($http) {

    this.getRules = function getRules(rule_query,data) {
        var apiBase = apiUrl + 'get-rules';
        var config = {
            handleError:true,
            params: {
                rule_query: rule_query,
                data : data
            }
        };
        //return $http.get(apiBase, config).catch(function () {});
        return $http.get(apiBase, config)
          .catch(function (errorResponse) {
             console.error("Data service error");
             //IMPORTANT
             throw errorResponse;
        });
    }
}]);

Answer 2

In your service, you are setting up the catch without doing anything. This in general is bad practice, if you're going to use a catch block, then handle the error there. If not, don't declare the catch at all.

You can either remove the catch completely from the service method, which should result in your controller's catch handling it.

OR, you can leave the catch in the service call, and make sure to throw so that the error correctly bubbles up.