AngularJS $resource interceptors

Question

How do I add interceptors to a $resource call?

Let's say I have a resource factory called Users, like so;

app.factory('Users', ['$resource', 'resourceInterceptor',
  function ($resource, resourceInterceptor) {
    return $resource(
      'users/:user_id',
      {
        user_id: '@id'
      },
      {
        query: {
          method: 'GET', // Not changing the default method, just adding an interceptor
          interceptor: resourceInterceptor // Is there any better way to do this.. like globally?
        },
        save: {
          method: 'POST', // Same here
          interceptor: resourceInterceptor // Again...
        },
        ..., // And so on
      }
    );
  }]);

and my resourceInterceptor service looks like;

app.factory('resourceInterceptor', ['$rootScope',
  function ($rootScope) {
    return {
      request: function () {
        // This function isn't executed at all?
        $rootScope.loading = true;
      },
      response: function () {
        $rootScope.loading = false;
      },
      responseError: function () {
        $rootScope.loading = false;
      }
    };
  }]);

First of all, the request intercept function is never executed, why not?

Secondly, having to hardcode the interceptor to existing $resource methods is very tedious , is there a way to easier assign interceptors to specific $resource calls, or maybe even assign an interceptor to all $resource calls?

Hello @Unidan. One year later ... do you have an answer to your question ? — Franck Freiburger, Dec 29 '15 at 15:42

score 16 · Answer 1 · edited Jan 11 '16 at 15:53

To use an interceptor in a resource you should:

1 - Make an httpInterceptor with you request, response, responseError:

app.factory('myInterceptor', function () {
    //Code
    //return { request:...,
});

2 - Config this Interceptor in your app:

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('myInterceptor');
}]);

Right now as you have config your httpProvider to has an interceptor wherever you inject $http you will use this provider so... you will excute your request, response and responseError funciton.

3 - Using it in a resource. As $resource use $http and you have config a httpProvider globaly you will call your interceptors' func when you use your resource.

Second question: You can not set an interceptor to a concrete $http object, they (interceptors) are set globally.

(Even if you set the interceptor before your module definition and then you remove it, you can not know the execution order)

What you can do if you do not want to override the interceptor property in each $resource action (as you write in your question) you can improve your interceptor.

app.factory('userLoadingInterceptor', function () {
    //Code
    return {
        request: function(){
            //Check if your are working with a url related with users
            // and if so do things...
        }
});

Yeah but is there a way to specifically identify which requests are called through a `$resource` object, and which is just plain `$http`. — William, Jun 19 '14 at 09:40
As $resource use $http and as you are defining an interceptor in the $httpProvider. Your interceptor only do things at $http level. I am going to edit my answer — JDL, Jun 19 '14 at 17:28

score 0 · Answer 2 · answered Apr 22 '14 at 16:27

0

From the docs:

The interceptor object has two optional methods - response and responseError

I don't know what you want to achieve but generic HTTP interceptors might be an alternative.

answered Apr 22 '14 at 16:27

a better oliver

24,069
2
48
59

Afaik, the `$resource` service uses `$http`. The docs for `$http` interceptors (https://docs.angularjs.org/api/ng/service/$http#!) has a `request` field. – William Apr 22 '14 at 17:37
@WillB Do you really think the angular docs are wrong? `$resource` uses `$http`, but the interceptors used by `$resource` have no relation whatsoever to the interceptors of the `$http` service. Another alternative might be a decorator for `$resource`. – a better oliver Apr 22 '14 at 17:53
No, of course I don't think the docs are wrong. I just can't find the docs for `$resource` interceptors, so I assumed it was the same as `$http` interceptors. (Found it now on my laptop, was on mobile before). Well that sucks. What I want to achieve is a loading bar that is only shown when using a resource. I'll take a look at decorators. – William Apr 22 '14 at 18:17

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

A generic HTTP Interceptor should do what you want. You can find a sample here: Handle HTTP 302 response from proxy in angularjs.

edited May 23 '17 at 12:34

Community

1
1

answered Apr 22 '14 at 16:55

MBielski

6,548
3
29
39

1

Adding an interceptor to the `$http` service will also trigger when angular loads static assets behind the scenes, which is not desired. Im sure there are ways to detect what kind of request it is, but it feels wrong. I guess I can just make a service that is injected to my controllers and deal with it there. – William Apr 22 '14 at 17:30
You should be able to configure the interceptor to not handle the error based upon the URL. – MBielski Apr 22 '14 at 18:23

AngularJS $resource interceptors

3 Answers3

Linked