uncaughtException "Cannot read property 'info' of undefined" Angularjs - angularjs

I am trying to add an interceptor in my main config file,below is the code.But I am getting the above error after adding the log. Googled but didn't get much help.Kindly help if anyone faced this error before.
// Intercept http calls.
$provide.factory('HttpResponseInterceptor', ['$q', '$log', function ($q, $log) {
return {
// On request success
request: function (config) {
$log.info('HttpInterceptor Request object' + config); // Contains the data about the request before it is sent.
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError: function (rejection) {
$log.error('HttpInterceptor Request Failure' + rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response: function (response) {
$log.info('HttpInterceptor Success Response' + response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failture
responseError: function (rejection) {
$log.error('HttpInterceptor Response Failure' + rejection); // Contains the data about the error.
// Return the promise rejection.
return $q.reject(rejection);
}
};
}]);
$httpProvider.interceptors.push('HttpResponseInterceptor');

Related

How to handle 401 error in angularjs select2?

I did use an http interceptor to handle 401 response status like following
var expiredSessionInterceptor = function ($q,$window) {
return {
request: function (config) {
return config;
},
requestError: function (rejection) {
// Contains the data about the error on the request and return the promise rejection.
return $q.reject(rejection);
},
response: function (response) {
return response;
},
responseError: function (response) {
if (response.status == 401) {
$window.location.href = '/Cortex_IP/j_spring_security_logout.do';
}
return $q.reject(response);
}
};
};
and it works every other ajax call expect select2 and its not intercepted by the above one .,
The select2 box continue loading (busy) when 401 error occurs.
Any one help me to handle 401 error in select2 in angularjs

Angular js interceptor that returns a cached response

I want to make a angularJS interceptor that when the client is offline returns instead of an error a cached response as if it wasn't any error.
What I've done so far was to make an interceptor that caches the api requests:
app.factory('httpCachingInterceptor', function ($q, apiCache) {
return {
'response' : function(response) {
// cache the api
if (response.config.url.indexOf('api/') > 0)
apiCache.addApiCache(response.config.url, response.data);
return response;
},
'responseError' : function(rejection) {
if (rejection.status == -1) {
// get the data from apiCache
//
apiCache.getApiCache(rejection.config.url, function(data) {
// build a new promise and return it as a valid response
})
}
return $q.reject(rejection);
}
}
})
I've noticed that when offline the rejection.status is -1 so that's when I check if a request was made while offline.
My question is how I build the response?
Should I make a new promise or can I update the rejection?
To convert a rejected promise to a fulfilled promise return a value in the onRejection handler.
Conversely, to convert a fulfilled promise to a rejected promise throw a value in the onFulfilled handler.
For more information, see Angular execution order with $q
I managed to make it work like this:
'responseError' : function(rejection) {
if (rejection.status == -1) {
// get the data from apiCache
var deferred = $q.defer();
apiCache.getApiCache(rejection.config.url, function(err, data) {
if (err || !data) {
return deferred.reject(rejection);
}
rejection.data = data;
rejection.status = 200;
deferred.resolve(rejection);
console.log("Resolve promise with ", rejection);
})
return deferred.promise;
}
return $q.reject(rejection);
}
So i made a new promise and modified the rejection I got with the new data from the cache.

AngularJS interceptor

I want to capture all request going out from my one page application like clicking on different tab or any hyperlink.
I have written an interceptor and want to put a ajax call for all request.
.factory('httpRequestInterceptor', function($q,$http){
return {
request: function($http,config){
window.alert(config.url);
var dummyValue = $http.get("url");
return config;
}
}
})
.config(function($httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
});
I think you are in search of http logger kind of factory. You can use this one
.config(function ($provide, $httpProvider) {
// Intercept http calls.
$provide.factory('MyHttpInterceptor', function ($q) {
return {
// On request success
request: function (config) {
console.log(config); // Contains the data about the request before it is sent.
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError: function (rejection) {
console.log(rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response: function (response) {
console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failture
responseError: function (rejection) {
console.log(rejection); // Contains the data about the error.
// Return the promise rejection.
return $q.reject(rejection);
}
};
});
// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('MyHttpInterceptor');
});
I tested, it works for routeProvider navigation as well. For more information please check this blog https://djds4rce.wordpress.com/2013/08/13/understanding-angular-http-interceptors/

angular interceptor is not rejected

$resource calls some API. If it returns some flag, than request should drop to .catch() section of $resource('api/').get(...).$promise.catch();
My interceptor does not trigger that call. It calls .then in any case
Interceptor code:
.factory('SomeHTTPInterceptor', function($q) {
return {
response: function(response) {
if (response.data.someFlag) {
return $q.reject(response);
}
return response;
}
};
})
How to get same response, but in catch section w/o checking for error in every single request?
You have to use the responseError handler as per doc
responseError: interceptor gets called when a previous interceptor threw an error or resolved with a rejection.
.factory('SomeHTTPInterceptor', ['$q', function($q) {
return {
// optional method
'responseError': function(rejection) {
if (rejection.data.someFlag) {
// do something
}
return $q.reject(rejection);
}
};
}]);

AngularJS global $http state ajax loader

I have an AngularJS app, and need an ajax loader for every request done by the $http - is there a simple way to do this.
My solution now is to set $rootScope.loading = 1 everytime i call a $http, and on the success set $rootScope.loading = 0..
What is the "best practice" for this?
My code now looks like:
$rootScope.loading = 1;
$http({method : "POST", url:url, data: utils.params(data), headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).success(function() {
$rootScope.loading = 0;
});
In this case will be better to use interceptor
Anytime that we want to provide global functionality on all of our requests, such as authentication,
error handling, etc., it’s useful to be able to provide the ability to intercept all requests before they
pass to the server and back from the server.
angular.module('myApp')
.factory('myInterceptor',
function ($q,$rootScope) {
var interceptor = {
'request': function (config) {
$rootScope.loading = 1;
// Successful request method
return config; // or $q.when(config);
},
'response': function (response) {
$rootScope.loading = 0;
// successful response
return response; // or $q.when(config);
},
'requestError': function (rejection) {
// an error happened on the request
// if we can recover from the error
// we can return a new request
// or promise
return response; // or new promise
// Otherwise, we can reject the next
// by returning a rejection
// return $q.reject(rejection);
},
'responseError': function (rejection) {
// an error happened on the request
// if we can recover from the error
// we can return a new response
// or promise
return rejection; // or new promise
// Otherwise, we can reject the next
// by returning a rejection
// return $q.reject(rejection);
}
};
return interceptor;
});
and register it to the config
angular.module('myApp')
.config(function($httpProvider) {
$httpProvider.interceptors.push('myInterceptor');
});
example from ng-book
Use an http interceptor in order to intercept all your $http requests\responses and perform logic in them.
Here's an example of creating a custom one.
Here's an example of a ready module.

Resources