Custom AJAX property within AngularJs Service

Question

Very simple scenario:

Code:

$.ajax({
    type: "GET/POST",
    url: 'http://somewhere.net/',
    data: data,
    beforeSend: '', // custom property
}).done().fail();

Basically I am looking for a legit way to modify beforeSend within Angular factory service. Please refer to what I have:

myApp.factory('GetBalance', ['$resource', function ($resource) {
    return $resource('/Service/GetBalance', {}, {
        query: { method: 'GET', params: {}, }, isArray: true,
    });
}]);

Here I am using AngularJs services api problem is the documentation is not very helpful towards what I am trying to achieve.

Thalaivar · Accepted Answer · 2015-07-03 12:20:39Z

2

If you want custom headers to be attached, you can do like this.

myApp.factory('GetBalance', ['$resource', function ($resource) {
    return $resource('/Service/GetBalance', {}, {
        query: { method: 'GET', params: {}, headers: { 'beforeSend': '' } }, isArray: true,
    });
}]);

answered Jul 3, 2015 at 12:20

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

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

2 Comments

iiminov Over a year ago

Apologies for not getting back sooner. I only got to test it properly just now. For whatever reason I can't seem to be able to find additional headers attached to the request when I view it in Chrome's Dev tools or Fiddler. Do I need to configure something like $httpProvider in module .config() ?

iiminov Over a year ago

Its been a while since I looked back. But I wanted to go back and report on my findings. I found respected reference in Angular documentation but for what ever reason it just wouldn't work for me. So ended up using $httpProvider.defaults.headers.common[] array to define custom params in config function.

Endre Simo · Accepted Answer · 2015-07-03 12:27:13Z

2

You might be interested in requestInterceptors, especially on the addFullRequestInterceptor method which has the following parameters:

It can return an object with any (or all) of following properties:

headers: The headers to send
params: The request parameters to send
element: The element to send
httpConfig: The httpConfig to call with

answered Jul 3, 2015 at 12:27

Endre Simo

11.6k3 gold badges44 silver badges52 bronze badges

Comments

iiminov · Accepted Answer · 2015-10-28 11:29:43Z

Solution sugested by @Thalaivar should have worked according to Angular docs but for whatever reason it just wouldn't work in my specific use case.

Here I provide an alternative solution that worked out for me as follows:

myApp.config(['$provide', '$httpProvider', function ($provide, $httpProvider) {
    // Setup request headers
    $httpProvider.defaults.headers.common['modId'] = 1;     // dynamic var
    $httpProvider.defaults.headers.common['pageId'] = 2;    // dynamic var
    $httpProvider.defaults.headers.common['token'] = 'xyz'; // dynamic var
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

I know that headed values are hard coded in my example but in reality things change from page to page so those values are actually dynamically retrieved.

Again if you are using $http based services then you should not need to do this.

Collectives™ on Stack Overflow

Custom AJAX property within AngularJs Service

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related