How to handle $resource service errors in AngularJS

Question

I am making requests to my API and I am using AngularJS $resource module. It's different from $http so I don't know how to handle my errors.

My service:

var appServices = angular.module('app.services', ['ngResource']);
appServices.factory('Category', ['$resource',
    function($resource){
        return $resource('/apicategoryerr/?format=:format', {}, {
            query: {
                method: 'GET', 
                params: { format: 'json'}, 
                isArray: true,

            }
        });
    }]);

My Controller:

...
Category.query(function(data) {
                console.log(data);
            });
...

I want something like this or .. I don't know a way to handle errors if my API is not working..

Category.query().success(function() {
                console.log('success');
            }).error(function() {
                console.log('error');
            });

marco.eig · Accepted Answer · 2013-12-14 19:35:42Z

180

you can pass the error handler as a second parameter toquery.

Category.query(function(data) {}, function() {});

EDIT:

to make things a bit clearer, some examples:

var Resource = $resource('/restapi/resource');

Resource.query(function(data) {
    // success handler
}, function(error) {
    // error handler
});

Resource.query({
    'query': 'thequery'
},function(data) {
    // success handler
}, function(error) {
    // error handler
});

Resource.query().$promise.then(function(data) {
    // success handler
}, function(error) {
    // error handler
});

Resource.query({
    'query': 'thequery'
}).$promise.then(function(data) {
    // success handler
}, function(error) {
    // error handler
});

edited Dec 14, 2013 at 19:35

answered Dec 14, 2013 at 14:23

marco.eig

4,2292 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Marcel Over a year ago

In the documentation it looks more like the 3rd parameter is the error callback. "Resource.action([parameters], [success], [error])" docs.angularjs.org/api/ngResource.$resource

Nicolas Janel Over a year ago

is there a way to define a default error handler common to all use of this resource (e.g. "resource not authorized by server" ?

schillingt Over a year ago

@NicolasJanel You could define a function that would handle it then do Resource.query().$promise.then(function(data) {}, errorFunction). You'll still have to include it every place you use a query, but at least you won't be redefining it each time.

marco.eig Over a year ago

@valkirilov I'd appreciate it if you accept this as the answer for this question

Carl G Over a year ago

@Kaspar the return value of instance methods such as myResource.$save and myResource.$delete is the promise. So you can just do myResource.$save().then(...).

|

davegson · Accepted Answer · 2015-03-05 17:12:38Z

You can define a error handler at the creation step of the resource by adding an interceptor object in the description of a method, with a responseError property, linked to your error function.

function resourceErrorHandler(response) { ... }

$resource('/path/:param/', {} , 
{
        'get':    {method:'GET', 
                   interceptor : {responseError : resourceErrorHandler}},
        'save':   {method:'POST'},
        'query':  {method:'GET', isArray:true, 
                   interceptor : {responseError : resourceErrorHandler}},
        'remove': {method:'DELETE'},
        'delete': {method:'DELETE'}
};

where resourceErrorHandler is a function called on each error on get or query method. For the problem asked, the get method is the only needed. Of course you can apply that to any action.

An other interceptor response exists for $resource to catch a normal response.

 {'get': {method:'GET', interceptor : {response : resourceResponseHandler}},

Interceptors are part of the $http module, you can further read about them in their docs.

masud_moni · Accepted Answer · 2017-11-02 09:23:44Z

2

Here is a new ES6 example (I use TypeScript) on my ng.resource

resolve: {
    detail: function (myService, $stateParams) {
        return myService.getEventDetail({ id: $stateParams.id }).$promise.then(data => data, error => false );
    }
}

and then in my controller, 'detail' injected into the controller will either resolve to the data (good) or false for error, where I handle the display of 404.

edited Nov 2, 2017 at 9:23

masud_moni

1,30619 silver badges34 bronze badges

answered Nov 30, 2016 at 21:41

httpete

3,02330 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to handle $resource service errors in AngularJS

3 Answers 3

8 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Linked

Related