Pushing or Unshifting into the transformRequest array of $http (non-global)

Question

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

In the answer's last example:

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 with this is that transformRequest: transform overwrites the array of functions that Angular has pre-built.

From the Angular docs:

To globally augment or override the default transforms, modify the $httpProvider.defaults.transformRequest and $httpProvider.defaults.transformResponse properties. These properties are by default an array of transform functions, which allows you to push or unshift a new transformation function into the transformation chain. You can also decide to completely override any default transformations by assigning your transformation functions to these properties directly without the array wrapper. These defaults are again available on the $http factory at run-time, which may be useful if you have run-time services you wish to be involved in your transformations.

Similarly, to locally override the request/response transforms, augment the transformRequest and/or transformResponse properties of the configuration object passed into $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 to you push another transform function to a call, not globally?

Answer 1

I found an easy solution using the .concat method

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

or alternatively, if you want your custom transformation to take place after angular's default transformations.

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

Answer 2

Angular, in 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);
}