Is it possible to add GET/POST parameters to Angular $http requests with an interceptor

Question

Say I need to include a GroupId parameter to every request the user makes, but I don't want to modify every service call to include that. Is it possible to make that GroupId appended automatically to all requests, whether it is POST or GET query string?

I have been looking into the interceptor request function, but can't figure out how to make the change

** Edit **

Current working sample below is a combo of Morgan Delaney and haimlit's suggestions (I think it is a combom anyway). The basic idea is that if the request is a POST, modify config.data. For GET, modify params. Seems to work so far.

Still not clear on how the provider system works in Angular, so I am not sure if it is entirely approriate to modify the data.params properties here.

.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.interceptors.push(['$rootScope', '$q', 'httpBuffer', function ($rootScope, $q, httpBuffer) {
      return {

          request: function (config) {

              if (config.data === undefined) {
                  //Do nothing if data is not originally supplied from the calling method
              }
              else {
                  config.data.GroupId = 7;
              }

              if (config.method === 'GET') {
                  if (config.params === undefined) {
                      config.params = {};
                  }
                  config.params.GroupId = 7;
                  console.log(config.params);
              }

              return config;
          }
      };
  } ]);
 } ]);

You could create a shortcut service and call it something like `shortcut.get( url, data )` which would append all your config data then return the `$http` promise. http://stackoverflow.com/questions/17497006/use-http-inside-custom-provider-in-app-config-angular-js — Morgan Delaney, Jun 25 '14 at 17:06
Here's a link with useful examples. If you still can't get it to work, post a plunker with what you've tried please. http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/ — haimlit, Jun 25 '14 at 17:10
@Morgan Delaney Thanks. I have updated my question with the way I have it currently working. Is the way I did have any negative consequences compared to the way you suggested? — Cabbagesocks, Jun 25 '14 at 20:50
It works but I'm not sure why the GroupId is added twice (first if and second if), when is config.data undefined? — Bruno Peres, Jun 12 '15 at 19:18

score 7 · Accepted Answer · answered Jun 25 '14 at 21:55

If your example works, great. But it seems to lack semantics IMHO.

In my comments I mentioned creating a service but I've set up an example Plunker using a factory.

Plunker

Relevant code:

angular.module( 'myApp', [] )
  .factory('myHttp', ['$http', function($http)
  {
    return function(method, url, args)
    {
      // This is where the magic happens: the default config
      var data = angular.extend({
        GroupId: 7
      }, args );

      // Return the $http promise as normal, as if we had just
      // called get or post
      return $http[ method ]( url, data );
    };
  }])
  .controller( 'myCtrl', function( $scope, $http, myHttp )
  {
    // We'll loop through config when we hear back from $http
    $scope.config = {};

    // Just for highlighting
    $scope.approved_keys = [ 'GroupId', 'newkey' ];

    // Call our custom factory
    myHttp( 'get', 'index.html', { newkey: 'arg' }).then(function( json )
    {
      $scope.config = json.config;
    });
  });

That is way better than mine, I can see what you mean about mine. This is much clearer about what is happening. But where you say "Call our custom factory", why does that happen? Aren't we supposed to let Angular run the factories (providers?) itself while we use the services? — Cabbagesocks, Jun 26 '14 at 00:39
Angular has its own providers, services and factories. They are all prefixed with a `$` before their name. So in the example above, `$http` is an Angular service, whereas `myHttp` (name is arbitrary) is a user-configured factory. — Morgan Delaney, Jun 26 '14 at 16:36

Is it possible to add GET/POST parameters to Angular $http requests with an interceptor

1 Answers1