AngularJS Intercept all $ http JSON responses

Question

I have an application built using AngularJS and a server side that provides all requests in JSON form. Each request is authenticated in a JSON container that contains a data variable that contains data specific to the request. Other data that is used to maintain state and control within the application checks for errors and success messages and checks for session flags. All these other variables are submitted with EVERY request and checked before the data variable.

Now I have a method for checking the contents of the JSON response first, and then the data itself.

$http.get('something.json').success(function(response) { var data = examineJSONResponse(response); //do the data stuff }); 

This works, and the studyJSONResponse method examines the code, and if something is wrong, it throws an exception and reloads the page using window.location.href.

Is there a way I can automate this in AngularJS so that every time a call to $ http is received, it checks this and ONLY returns the contents of the data variable as a JSON response?

Answer 1

You can intercept responses by adding an interceptor to $httpProvider.interceptors using Angular 1.1.4+ (see documentation for finding interceptors here ).

For a certain type of content, such as json, you can reject the changes or throw an exception, even if the call was successful. You can change response.data , which will also be passed to your controller code:

 myModule.factory('myHttpInterceptor', function ($q) { return { response: function (response) { // do something on success if(response.headers()['content-type'] === "application/json; charset=utf-8"){ // Validate response, if not ok reject var data = examineJSONResponse(response); // assumes this function is available if(!data) return $q.reject(response); } return response; }, responseError: function (response) { // do something on error return $q.reject(response); } }; }); myModule.config(function ($httpProvider) { $httpProvider.interceptors.push('myHttpInterceptor'); }); 

---

NOTE. Here is the original answer for versions prior to version 1.1.4 ( responseInterceptors are deprecated with Angular 1.1.4):

There may be a better way, but I think you can do something similar to this post using an HTTP interceptor (described here ) (for a specific type of content like json) where you potentially reject the changes or throw an exception , even though the challenge was successful. You can change the response.data , which will also be passed to your controller code.

 myModule.factory('myHttpInterceptor', function ($q) { return function (promise) { return promise.then(function (response) { // do something on success if(response.headers()['content-type'] === "application/json; charset=utf-8"){ // Validate response if not ok reject var data = examineJSONResponse(response); // assumes this function is available if(!data) return $q.reject(response); } return response; }, function (response) { // do something on error return $q.reject(response); }); }; }); myModule.config(function ($httpProvider) { $httpProvider.responseInterceptors.push('myHttpInterceptor'); }); 

Answer 2

Another solution is to create a service and use it around the $ http variable.

 angular.module('App', []) .factory('myHttp',['$http',function($http) { return function(url, success, failure) { $http.get(url).success(function(json) { var data = examineJSONResponse(json); data && data.success ? success() : failure(); }).error(failure); ); } }]); 

And now it can be called like:

 myHttp(url, onSuccess, onFailure);