Pushing or Unshifting to an array of transformRequest $ http (non-global)

Question

See the accepted answer here for a pretty good explanation of the transFormRequest function / array.

In the final example response:

var transform = function(data){ return $.param(data); } $http.post("/foo/bar", requestData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}, transformRequest: transform }).success(function(responseData) { //do stuff with response }); 

However, the problem is that transformRequest: transform overwrites the array of functions that Angular has previously built.

From Angular docs :

To globally increase or override default transformations, change the properties of $ httpProvider.defaults.transformRequest and $ httpProvider.defaults.transformResponse. These properties, by default, are a set of conversion functions that allows you to click or not toggle a new conversion function into a transformation chain. You can also completely override any default transformations by assigning your transform functions to these properties directly without an array wrapper. These default values ​​are again available at $ http factory at runtime, which can be useful if you have runtime services that you want to involve in your conversions.

Similarly, to locally override request / response transformations, add the transformRequest and / or transformResponse properties of the configuration object passed in $ http.

If I wanted to apply my transform function globally, I would do

 $httpProvider.defaults.transformRequest.unshift(myFunction) 

or

 $httpProvider.defaults.transformRequest.push(myFunction) 

My question
Instead of erasing the entire array of transform request functions, how do you push another transform function on a call, rather than globally?

Answer 1

I found a simple solution using the .concat method

 { transformRequest: [function(req){...}].concat($http.defaults.transformRequest) } 

or alternatively if you want your custom transform to be executed after angular transforms by default.

 { transformRequest: $http.defaults.transformRequest.concat([function(req){...}]) } 

Answer 2

Angular, the documentation makes this suggestion:

 $httpProvider.defaults.transformRequest = appendTransform($httpProvider.defaults.transformRequest, function(data) { //do whatever you want return data; }); function appendTransform(defaults, transform) { // We can't guarantee that the default transformation is an array defaults = angular.isArray(defaults) ? defaults : [defaults]; // Append the new transformation to the defaults return defaults.concat(transform); } 

Answer 3

Here is another solution:

 .config(function($httpProvider) { $httpProvider.defaults.transformRequest = function(data) { var query = '', name, value; if (data instanceof Object) { for(key in data) { name = key; value = data[key]; query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; } return query; } else { return data; } }; $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; }) 

Hope this helps