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](http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/). — alecxe, Oct 03 '14 at 01: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, Oct 03 '14 at 01: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, Oct 03 '14 at 01: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, Oct 03 '14 at 02:08
sorry to mis-interpret your comment, let's see the progress :) — webberpuma, Oct 03 '14 at 02:17

m59 · Accepted Answer · 2022-02-04T02:55:31.807

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 04 '22 at 02:55

answered Oct 03 '14 at 02:07

m59

43,214
14
119
136

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? – webberpuma Oct 03 '14 at 02:20
Does my updated answer make sense of it for you? Documentation is usually hard to understand and incomplete. It's unfortunate, but typical. – m59 Oct 03 '14 at 03:04
Because I am new to angularjs (and, to be honest with you, I am new to programming), I feel uncomfortable when something is not on the official document, I think to myself there must be some fundamental concepts of programming I don't understand. Anyway, thanks for your reply, you even show me the source code (although I could not understand) and tell me most documentation sucks, that helps a lot. – webberpuma Oct 03 '14 at 03:13
@webberpuma The only "official documentation" to me IS the source code =D The line I linked shows that `interceptors` is simply an array assigned as a property of `$httpProvider`. That is why you use `push` to add your interceptors. You didn't my mark my answer as accepted... is there something else I need to add? – m59 Oct 03 '14 at 04:53
sorry, I don't even realize I need to mark your answer as accepted. I just did that, but it will be even better if you could put more explanation in the answer just as you did in the above comment :) – webberpuma Oct 03 '14 at 05:18
@webberpuma Ok, I updated my answer some more. You don't "have" to accept an answer, but it lets us know whether an answer has solved your issue. There are some people that just don't accept answers, and it is very frustrating. http://stackoverflow.com/questions/20099784/open-links-in-new-window-using-angularjs/20343013#comment39029444_20099784 – m59 Oct 03 '14 at 06:05
2

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 – webberpuma Oct 04 '14 at 02:20
1

I found this in the Angular docs and had to share it with you. Look at what this function returns. "Deserialized thingy." https://docs.angularjs.org/api/ng/function/angular.fromJson – m59 Oct 05 '14 at 00:32
1

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? – webberpuma Oct 05 '14 at 07:22
@webberpuma yeah :) it's like saying "returns stuff". I have no idea why that is there. – m59 Oct 05 '14 at 14:03
@hvgotcodes I don't think it's out of date. Can you make a demo? – m59 Dec 17 '15 at 18:28
Excellent example of an interceptor. Thank you. – Fintan Kearney Jan 17 '17 at 11:29

angularjs $httpProvider interceptor documentation

1 Answers1

Linked