AngularJS $resource - call fallback URL after X milliseconds

Question

I want my front-end application to be able to switch to another api in case of the first one is down

For example: I call https://api.example.com/users?name=bob - then I get net::ERR_CONNECTION_TIMED_OUT (a Chrome XHR response), which indicates that the api is non-responsive. I now would like my front-end to call https://api1.example.com/users?name=bob instead.

I have looked at the documentation for AngularJS 1.5.7 $resource, which states that it takes an action parameter timeout of type {number}. However, setting it to for example 500 still throws the net::ERR_CONNECTION_TIMED_OUT after approximate 2 minutes!

Wanted flow:

1. Ask https://api.example.com/users?name=bob
2. If this haven't answered within 10 seconds:
   • Ask https://api1.example.com/users?name=bob
3. keep asking apiX while I still have backends

Pseudocode:

angular.forEach(fallback_urls, function(url) {
  $resource(url + '/users?name=bob', {}, {timeout: 10}).get()
});

Answer 1

You have declared your actions wrong on your $resource.

$resource(url + '/users?name=bob', {}, {
    'get': {
        method: 'GET',
        timeout: 10000
     }
});

You may also want to look into the "cancellable" option.

var res = $resource(url + '/users?name=bob', {}, {
  'get': {
    method: 'GET',
    cancellable: true
  }
});

var response = res.get();
var timeoutPromise = $timeout(function(){
    response.$cancelRequest();
},10000);

response.$promise.then(function(){
    $timeout.cancel(timeoutPromise);
});

And then cycle through your declared backup $resource objects in some manner. And of course abort the timeout if the call resolves! Hope this gives you some clues!