How to access the $http service request object in Angular JS? - angularjs

Question

I am making an http request using the $http service as follows :
$http({
url: "URL",
method: "POST",
data: payload,
headers :{
"Content-Type": "application/json",
"access_token": xyz
}
}).then(function (response) {
$log.debug("Response :",response);
}, function (error) {
$log.debug("error :",error);
});
I need to access the request object(along with the headers,etc.) that I sent over. Is it possible in code?

Answer 1

Use an interceptor. Here is a good article and an example from it.
module.factory('timestampMarker', [function() {
var timestampMarker = {
request: function(config) {
config.requestTimestamp = new Date().getTime();
return config;
},
response: function(response) {
response.config.responseTimestamp = new Date().getTime();
return response;
}
};
return timestampMarker;
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('timestampMarker');
}]);
Using an interceptor will give you the ability to read into or add headers to the request, etc. Hope it helps.

Answer 2

You can see the request properties like in the example:
$http.post('/service', params).success(
function(data, status, headers, config) {
//...
console.log('properties', config.method, config.headers['Content-Type'], config);
});
or if you want to see/change properties before/after request in more global way you can use interceptors:
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push(['$q', function($q) {
return {
'request': function(config) {
// for example:
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
// same more logic ...
return config;
},
'response': function(response) {
// for example:
if (!response.data || !response.data.status) {
return $q.reject(response);
}
// same more logic ...
return response;
},
'responseError': function(rejection) {
// same more logic ...
}
};
}]);
}]);