Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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;
          }
      };
  } ]);
 } ]);
like image 614
Cabbagesocks Avatar asked Jun 25 '14 16:06

Cabbagesocks


People also ask

What can an interceptor do in angular?

The angular interceptor is a medium connecting the backend and front-end applications. Whenever a request is made, the interceptors handle it in between. They can also identify the response by performing Rxjs operators. The interceptors do not initiate the handle method and handle the requests at their level.

How do you pass multiple parameters in HTTP GET request in angular 8?

Passing multiple parameters to Http get request We have to pass page & per_page parameters to the list of users API. let queryParams = new HttpParams(); queryParams = queryParams. append("page",1); queryParams = queryParams. append("per_page",1);

How do you modify the $HTTP request default Behaviour?

To add or overwrite these defaults, simply add or remove a property from these configuration objects. To add headers for an HTTP method other than POST or PUT, simply add a new object with the lowercased HTTP method name as the key, e.g. $httpProvider. defaults.

How do you pass multiple parameters in HTTP POST request in angular 6?

Create HttpParams You can make a POST request with multiple parameters. To do that, create a new HttpParams object and append the desired parameters to it.


1 Answers

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;
    });
  });
like image 140
Morgan Delaney Avatar answered Nov 21 '22 15:11

Morgan Delaney