angularjs $httpProvider interceptor documentation

Question

I am new to angular (and programming), here is a seemingly simple question but I could not figure it out.

some tutorials suggests using $httpProvider.interceptors.push('interceptorName') to manipulate the http request and response.

I want to know more about the interceptor thing so I look at the official document, but I could not find anything related to interceptor, there are only a method (useApplyAsync([value]);) and a property (defaults) in $httpProvider (docs).

I know from other tutorials that an interceptor is a regular service factory and I know how to use it, but my question is: since the syntax is $httpProvider.interceptors.push('interceptorName'), then I expect I will find a property called "interceptors" in $httpProvider, but in fact I can't. Is something I miss to get this confusion? or is my concept totally wrong from the bottom?

Here is a good read about interceptors: Interceptors in AngularJS and Useful Examples. — alecxe
– alecxe, Commented Oct 3, 2014 at 1:21
I have already read the article before but it doesn't answer my question, please read my question carefully, my question seems like a general misconception rather than a specific problem related to interceptors, thanks. — webberpuma
– webberpuma, Commented Oct 3, 2014 at 1:25
I don't think it is a comment, it is a question, the question is: why can't I find interceptors property in $httpProvider document? — webberpuma
– webberpuma, Commented Oct 3, 2014 at 1:37
I'm not questioning your question being a question, I'm commenting that I commented, not answered. The only reason I've put a comment is that I am willing to help but I'm not confident enough in the topic, but I remember this article helped me a lot in understanding interceptors. I've also upvoted the question because I find it interesting and I like the effort to understand how things work, and favorited it so I can see the progress. — alecxe
– alecxe, Commented Oct 3, 2014 at 2:08

m59 · Accepted Answer · 2022-02-04 02:55:31Z

27

Interceptors are in the documentation here.

Here's an example of how to write one.

.config([
  '$httpProvider',
  function($httpProvider) {

    var interceptor = [
      '$q',
      '$rootScope',
      'userSession',
      function($q, $rootScope, userSession) {

        var service = {

          // run this function before making requests
          'request': function(config) {

            if (config.method === 'GET' || userSession.isAuth()) {
              // the request looks good, so return the config
              return config;
            }

            // bad request, so reject
            return $q.reject(config);

          }

        };

        return service;

      }
    ];

    $httpProvider.interceptors.push(interceptor);

  }
])

The reason there's nothing on the $httpProvider documentation page about interceptors is because the developers didn't include the following code in the $http script from which the docs are generated:

/**
   * @ngdoc property
   * @name $httpProvider#interceptors
   * @description
// etc

Documentation in general is known to be incomplete, inaccurate, and/or confusing. Until recently, I always thought I was the problem when I couldn't find or understand something, but I've found that it's often because documentation is just lousy. However, we should all be thankful that we have such great tools to use and keep in mind that perhaps the documentation is poor because time had to be focused on writing the tool instead of the manual for the tool.

The most reliable "documentation" is the source code itself, though it can be a lot less friendly to read! In the source code I linked above, you can see this.interceptors = []. this refers to the $httpProvider, so it is assigning the property interceptors to $httpProvider with the value being an empty array. To add your interceptors, you simply push() your interceptor to this array.

edited Feb 4, 2022 at 2:55

answered Oct 3, 2014 at 2:07

m59

43.9k14 gold badges122 silver badges139 bronze badges

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

11 Comments

webberpuma Over a year ago

Thanks for the answer, it clears a bit but still can't solve my question: if the syntax is $httpProvider.interceptors.push(...), why there isn't a property named interceptor in the $httpProvider document?

m59 Over a year ago

Does my updated answer make sense of it for you? Documentation is usually hard to understand and incomplete. It's unfortunate, but typical.

webberpuma Over a year ago

Thanks for updating the answer, now it seems perfect because it explains clearly and provides me a general picture of documentation. Any beginner like me will be less frustrated and more confident in coding after reading your answer

m59 Over a year ago

I found this in the Angular docs and had to share it with you. Look at what this function returns. "Deserialized thingy." docs.angularjs.org/api/ng/function/angular.fromJson

webberpuma Over a year ago

What? because my first language is not English, I might get wrong what you actually mean. I suppose you mean sometimes the documentation just sucks because "thingy" is a playful term and should not be put in the official document. is that right?

|

Collectives™ on Stack Overflow

angularjs $httpProvider interceptor documentation

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related