Retry request with $http interceptor

Question

I'm sure there is an easy way to do what I want, I just cant wrap my head around it. How can I get the http interceptor in angular to retry a request if it fails? I imagine I would have to build some sort of promise in the request right? Then in the response I would have to check whether the response was an error and if so, do the promise? How is that done? I have been trying to adapt the example here: http://docs.angularjs.org/api/ng.$http

The reason I am trying to use an interceptor is because I need to add the token and a few other things to the request url, as well as some things to handle xdr's.

score 59 · Answer 1 · edited May 23 '17 at 11:54

59

Here's a $http interceptor that (immediately) replays timed out request(s) (i.e. response status 0). There were two non-obvious (to me!) elements to constructing this example:

How to call $http from within the interceptor - simply adding $http to the dependency list didn't work as angular complains of a circular dependency
How to reference the original request from the response object in order to retry it

This answer addresses both topics but is more involved so I include a simplified version below.

joinApp.factory('httpResponseErrorInterceptor',function($q, $injector) {
  return {
    'responseError': function(response) {
      if (response.status === 0) {
        // should retry
        var $http = $injector.get('$http');
        return $http(response.config);
      }
      // give up
      return $q.reject(response);
    }
  };
});

joinApp.config(function($httpProvider) {
  $httpProvider.interceptors.push('httpResponseErrorInterceptor');
});

In your actual implementation, you would likely want more sophisticated http response code processing, a limit to the number of times you retry, etc.

edited May 23 '17 at 11:54

Community

1
1

answered Jan 04 '14 at 00:27

mygzi

1,303
1
11
21

1

I added a separate answer with delayed retry, in case anyone is pondering the easiest way to make one: http://stackoverflow.com/a/31965945/1338062 – user1338062 Aug 12 '15 at 12:58
Note that response status can be `0` when a mobile device is in offline (airplane) mode. This would create an infinite loop of requests until the device goes online. – jakub.g Mar 24 '16 at 12:02
1

How to implement the max number of retries? – Thomas Stubbe Oct 07 '16 at 15:01
Will this code "return $http(response.config);" actually hit controller's callback? – Mark Apr 10 '17 at 20:34
The only way I can think of to limit the number of retries solely from the interceptor is to add a name-spaced param to the request url such as `?like my_app_retries=1`, and increment the value of that param in the interceptor. Of course, the resource you're trying to hit might not like random arbitrary params in the request – ErikAGriffin Jun 13 '19 at 03:19

score 12 · Answer 2 · edited May 23 '17 at 11:46

For the sake of completeness, here is a version of mygzi's answer with retry delay:

.factory('httpResponseErrorInterceptor', ['$injector', '$q', '$timeout', function($injector, $q, $timeout) {
  return {
    'responseError': function(response) {
      if (response.status === 0) {
        return $timeout(function() {
          var $http = $injector.get('$http');
          return $http(response.config);
        }, 15000);
      }
      return $q.reject(response);
    }
  };
}])

.config(function($httpProvider) {
  $httpProvider.interceptors.push('httpResponseErrorInterceptor');
});

$timeout returns a promise that is completed with what is returned from the function parameter, so we can conveniently just return the $http call wrapped in $timeout.

Thanks for the straightforward and concise solution. – Henry Zou Sep 30 '16 at 22:06 — Henry Zou, Sep 30 '16 at 22:06
Tnx, i really needed the returning promise! – Verthosa Oct 05 '17 at 09:35 — Verthosa, Oct 05 '17 at 09:35

score 2 · Answer 3 · answered Nov 19 '13 at 15:50

2

I've done this for an app I wrote before. To do the retry wrap the $http usage in a function (or preferably in a service so that you can reuse it easily). If the request fails, call the function again.

The trick is then to pass the promise object along with each request. If you create a new promise with each request then it won't match the one you returned to the original caller, so the original caller won't get his promise resolve once the request passes.

So it is something like this (note that the defer object is passed along in each retry):

app.service('HttpService', ['$q', function($q) {
  this.makeRequest = _makeRequest;

  function _makeRequest(url, data, deffered) {
    // We want to keep the same promise for each request, so we don't loose track
    if (deferred === undefined) {
      deferred = $q.defer();
    }

    // Now make the request
    $http({...}).success(...).error(
      function(){
        // If some condition
        _makeRequest(url, data, deffered);
      }
    )

    // Lastly return the promise
    return deferred.promise;
  }
}])

answered Nov 19 '13 at 15:50

Erik Honn

7,576
5
33
42

How would I adapt that so that I only retry once? – jensengar Nov 19 '13 at 15:55
And the reason I would like to put it in an interceptor is so that it happens automatically. I don't want to have to do $http({..}).error(...) everywhere. You know what I mean? – jensengar Nov 19 '13 at 15:57
Just add a fourth argument, like "times_retried" and check that before retrying. – Erik Honn Nov 19 '13 at 15:58
I haven't tried using an interceptor, so I am not sure how that would work. But that is the point of doing it as a service, I never use $http, I simply use HttpService instead. Of course, I built this at the start of the project so I knew to use the service from the start. If you are changing a large codebase that might not be that fun. – Erik Honn Nov 19 '13 at 15:59
Yeah, this is a module that touches several applications... +1 for your time. – jensengar Nov 19 '13 at 16:01

Retry request with $http interceptor

3 Answers3

Linked