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?

Answer 1

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...
        }
});