How to handle $http errors when using factories in angular

Question

I have a controller and factory like below and can easily handle success..But how can I handle errors?

Controller

app.controller("draftsCtrl", ["$scope", "DashboardFactory", function ($scope, DashboardFactory) {
    DashboardFactory.drafts(function (successCallback) {
        $scope.rooms listings= successCallback;
    });
}]);

Factory

app.factory('DashboardFactory', function ($http) {
    var DashboardFactory = {};

    DashboardFactory.active_listings = function (successCallback) {
        $http.get('active.json').success(successCallback);
    }

    DashboardFactory.inactive_listings = function (successCallback) {
        $http.get('inactive.json').success(successCallback);
    }

    DashboardFactory.drafts = function (successCallback) {
        $http.get('drafts.json').success(successCallback);
    }
    return DashboardFactory;
});

dfsq · Accepted Answer · 2016-04-16 20:02:33Z

Instead of passing callbacks around, prefer proper promises workflow. For this make your service methods return promise objects:

app.factory('DashboardFactory', function ($http) {
    var DashboardFactory = {};

    DashboardFactory.active_listings = function () {
        return $http.get('active.json');
    }

    DashboardFactory.inactive_listings = function () {
        return $http.get('inactive.json');
    }

    DashboardFactory.drafts = function () {
        return $http.get('drafts.json');
    }

    return DashboardFactory;
});

Then use promise API to handle success (then callback) and errors (catch):

app.controller("draftsCtrl", ["$scope", "DashboardFactory", function ($scope, DashboardFactory) {
    DashboardFactory.drafts().then(function (response) {
        $scope.rooms_listings = response.data;
    })
    .catch(function() {
      console.log('Error ocurred');
    });
}]);

finico · Accepted Answer · 2016-04-16 20:31:55Z

1

"service" looks more elegantly in this case

function DashboardFactory($http) {
    this.active_listings = function () {
        return $http.get('active.json');
    };

    this.inactive_listings = function () {
        return $http.get('inactive.json');
    };

    this.drafts = function () {
        return $http.get('drafts.json');
    };
});

DashboardFactory.$inject = ['$http'];

app.factory('DashboardFactory', DashboardFactory);

answered Apr 16, 2016 at 20:31

finico

7117 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to handle $http errors when using factories in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related