Stop request in angularjs interceptor

I ended up bypassing angular XHR call with the following angular Interceptor:

function HttpSessionExpiredInterceptor(sessionService) {
    return {
        request: function(config) {
            if (sessionService.hasExpired()) {
                /* Avoid any other XHR call. Trick angular into thinking it's a GET request.
                 * This way the caching mechanism can kick in and bypass the XHR call.
                 * We return an empty response because, at this point, we do not care about the
                 * behaviour of the app. */
                if (_.startsWith(config.url, '/your-app-base-path/')) {
                    config.method = 'GET';
                    config.cache = {
                        get: function() {
                            return null;
                        }
                    };
                }
            }

            return config;
        }
    };
}

This way, any request, POST, PUT, ... is transformed as a GET so that the caching mechanism can be used by angular. At this point, you can use your own caching mechanism, in my case, when session expires, I do not care anymore about what to return.

The $http service has an options timeout to do the job. you can do like:

angular.module('myApp')
    .factory('httpInterceptor', ['$q', '$location',function ($q, $location) {
        var canceller = $q.defer();
        return {
            'request': function(config) {
                // promise that should abort the request when resolved.
                config.timeout = canceller.promise;
                return config;
            },
            'response': function(response) {
                return response;
            },
            'responseError': function(rejection) {
                if (rejection.status === 401) {
                    canceller.resolve('Unauthorized'); 
                    $location.url('/user/signin');
                }
                if (rejection.status === 403) {
                    canceller.resolve('Forbidden');  
                    $location.url('/');
                }
                return $q.reject(rejection);
            }

        };
    }
    ])
    //Http Intercpetor to check auth failures for xhr requests
   .config(['$httpProvider',function($httpProvider) {
        $httpProvider.interceptors.push('httpInterceptor');
    }]);

Not sure if it is possible in general. But you can start a $http request with a "canceler".

Here is an example from this answer:

var canceler = $q.defer();
$http.get('/someUrl', {timeout: canceler.promise}).success(successCallback);
// later...
canceler.resolve();  // Aborts the $http request if it isn't finished.

So if you have control over the way that you start your request, this might be an option.

Here is what works for me, especially for the purposes of stopping the outgoing request, and mocking the data:

app
  .factory("connectionInterceptor", [
    "$q",
    function ($q) {
      return {
        request: function (config) {
          // you can intercept a url here with (config.url == 'https://etc...') or regex or use other conditions
          if ("conditions met") {
            config.method = "GET";
            // this is simulating a cache object, or alternatively, you can use a real cache object and pre-register key-value pairs,
            // you can then remove the if block above and rely on the cache (but your cache key has to be the exact url string with parameters)
            config.cache = {
              get: function (key) {
                // because of how angularjs $http works, especially older versions, you need a wrapping array to get the data
                // back properly to your methods (if your result data happens to be an array). Otherwise, if the result data is an object
                // you can pass back that object here without any return codes, status, or headers.
                return [200, mockDataResults, {}, "OK"];
              },
            };
          }
          return config;
        },
      };
    },
  ])
  .config(function ($httpProvider) {
    $httpProvider.interceptors.push("connectionInterceptor");
  });

If you are trying to mock a result like

[42, 122, 466]

you need to send an array with some http params back, its just how the ng sendReq() function is written unfortunately. (see line 1414 of https://github.com/angular/angular.js/blob/e41f018959934bfbf982ba996cd654b1fce88d43/src/ng/http.js#L1414 or snippet below)

        // from AngularJS http.js

        // serving from cache
        if (isArray(cachedResp)) {
          resolvePromise(cachedResp[1], cachedResp[0], shallowCopy(cachedResp[2]), cachedResp[3], cachedResp[4]);
        } else {
          resolvePromise(cachedResp, 200, {}, 'OK', 'complete');
        }

I just ended up in returning as an empty object

'request': function request(config) {
    if(shouldCancelThisRequest){  
        return {};
    }
    return config;
}