Hello everyone,
I have been attempting to implement a global httpInterceptor that will display a custom popup message when a client timeout occurs, rather than a server timeout. I came across a helpful article on this topic: Angular $http : setting a promise on the 'timeout' config. I tried converting the solution provided in the article into an httpInterceptor, but unfortunately, it is not functioning as expected and is exhibiting some strange behavior.
$provide.factory('timeoutHttpInterceptor', function ($q, $translate, $injector) {
var timeout = $q.defer();
var timedOut = false;
setTimeout(function () {
timedOut = true;
timeout.resolve();
}, 10000);
return {
request: function (config) {
config.timeout = timeout.promise;
return config;
},
response: function(response) {
return response;
},
responseError: function (config) {
if(timedOut) {
var toastr = $injector.get('toastr');
toastr.custom('network', $translate('title'), $translate('label'), { timeOut: 5000000000000, closeButton: true, closeHtml: '<button></button>' });
return $q.reject({
error: 'timeout',
message: 'Request took longer than 1 second(s).'
});
}
},
};
});