AngularJS Promise retries

All we need is an easy explanation of the problem, so here it is.

I am having some trouble getting a retry function to work and was hoping for some assistance. I have a $resource that I want to have called until a success condition occurs or the maximum retries has been exceeded.

The issue I seem to be running into is that within my retry function I am calling another promise and that is where the condition would be checked. I could get the code to function as intended by removing the added promise and creating a default success condition after a few retries but I cannot figure out how to correctly add the new promise call into the function.

resource is a stand-in for an Angular $resource which returns a $promise

My code is as follows:

resource.$promise.then(function (response) {
  return keepTrying(state, 5);
 }).then(function (response) {

 }).catch(function (err) {
   console.log(err);
 });

And the keepTrying function:

function keepTrying(state, maxRetries, deferred) {
  deferred = deferred || $q.defer();
  resource.$promise.then(function (response) {
    success = response;
  });
  if (success) {
    return deferred.resolve(success);
  } else if (maxRetries > 0) {
    setTimeout(function () {
      keepTrying(state, maxRetries - 1, deferred);
     }, 1000);
   } else if (maxRetries === 0) {
     deferred.reject('Maximum retries exceeded');
   }
   return deferred.promise;
 }

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

The problem with your attempt is that you are not re-querying the resource, but using the promise for an already-queried resource over and over.

What you need to do is use a function that will (a) initiate the query, and (b) return the promise for that initiated query. Something like this:

function () { return $resource.get().$promise; }

Then you can pass it into something like this, that will do the retries.

function retryAction(action, numTries) {
    return $q.when()
        .then(action)
        .catch(function (error) {
            if (numTries <= 0) {
                throw error;
            }
            return retryAction(action, numTries - 1);
        });
}

Here’s how you would start this off:

retryAction(function () { return $resource.get().$promise; }, 5)
.then(function (result) {
    // do something with result 
});

One nice thing about this approach is that even if the function that you pass to it throws an error upon invoking it, or doesn’t return a promise at all, the retry functionality and the returning of the result via a resolved promise will still work.

Example

Method 2

You can implement a retryOperation function that returns a new promise upon error up to a maximum retry count thats passed as an argument:

function retryOperation(retryCount) {
    var count = 0;
    function success(result) {
        return result;
    }
    function error(result) {
         ++count;
         if (count <= retryCount)
             return $resource(...).query().$promise.then(success, error);

         throw 'max retries reached';
    }
    return $resource(...).query().$promise.then(success, error);
}

Usage

retryOperation(3).then(
    function success(result) {
        // done!
    }, 
    function error(reason) {
         alert(reason);
    });
var app = angular.module('app', []);
app.controller('ctrl', function($q) {
  function retryOperation(count) {
    var retryCount = 0;

    function operation() {
      var deferred = $q.defer();
      deferred.reject('failed');
      return deferred.promise;
    }

    function success(result) {
      return result;
    }

    function error(result) {
      ++retryCount;
      if (retryCount <= count) {
        alert('retrying ' + retryCount);
        return operation().then(success, error);
      }
      throw 'maximum retries reached';
    }
    return operation().then(success, error);
  }

  retryOperation(3).then(
    function success(result) {
      alert('done');
    },
    function error(result) {
      alert(result);
    });


});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</head>

<body ng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="name" />{{name}}
</body>

</html>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply