Angular 1.5 Timeout Using A HttpInterceptor

All, i am trying to setup a global httpInterceptor to have a custom popup message when a client timeout appears, not a server one. I found this article: Angular $http : setting a p

Solution 1:

You can use $timeout service that returns a promise and assign it to config.timeout. Take a look at the code below.

.factory('timeoutInterceptor', ['$q','$timeout', function($q,$timeout) {
    return {
      request: function(config) {
        //assign a promise with a timeout, and set timedOut flag, no need to trigger $digest, thus false as 3rd param
        config.timeout = $timeout(function(){ config.timedOut = true },2000,false);
        return config;
      },
      responseError :function(rejection) {
        if(rejection.config.timedOut){ //if rejected because of the timeout - show a popup 
            alert('Request took longer than 1 second(s).');
        }
        return $q.reject(rejection);
      }
    };

Here is full working example : http://jsfiddle.net/2g1y4bk9/