Angular recursive factory method

Question

I would like to ask is it possible to return recursive factory method. I will show some code so you could understand me more. We have factory:

angular.module('module')
.factory('synchronizationStatus', ['$http', 'apiBase', '$timeout', function ($http, apiBase, $timeout) {
    var service_url = apiBase.url;

    function syncCompleted ( correlationId ) {
        checkSync (correlationId)
            .then(function(response){
                $timeout(function() {
                    // if I get response.data true, i want to proceed to controller
                    if(response.data){
                        return "now I want to return result to controller"
                    }
                    else {
                        // check again
                        checkSync(correlationId)
                    }
                }, 500);

            })
    }

    function checkSync( correlationId ){
        return $http.get(service_url + query);
    }

    return {
        syncCompleted: syncCompleted
    };
}]);

Main idea with this factory method is that i constantly (every 500ms each) send ajax request to backend and check if some operation is completed or no, and when it is completed i would like to send promise to controller function, which looks like this:

function save( client ) {
        clients.addClient( client )
            .then( function(response) {
              synchronizationStatus.syncCompleted(response.data.CorrelationId);
            }, onSaveError)
            .then( redirectToList, onSaveError )
            .finally( unblock );
    }

after backend returns true to my factory method i would like to execute other functions in my controller. Of course I could do recursion in my controller and it would solve this problem. Although I have to reuse this recursion in many other controllers so I would like to reuse this method.

Answer 1

Yes, you should be able to do this, but you need to change the code in your factory a little:

angular.module('module')
.factory('synchronizationStatus', [
    '$http', 
    'apiBase', 
    '$timeout', 
    function ($http, apiBase, $timeout) {
        var service_url = apiBase.url;

        function waitSyncCompletion( correlationId ) {
            return checkSync (correlationId)
            .then(function(response){
                 if (response.data) {
                     return "all done!";
                 }   

                 return $timeout(function() {
                     // check again
                     return waitSyncCompletion(correlationId);
                 }, 500);
            });
        }

        function checkSync( correlationId ){
            var query = '...'; // determine query
            return $http.get(service_url + query);
        }

        return {
            waitSyncCompletion: waitSyncCompletion
        };
    }
]);

Then in your controller, you would need to use a return so that you can wait for the operation to complete:

function save( client ) {
    clients.addClient( client )
    .then( function(response) {
         return synchronizationStatus.waitSyncCompletion(response.data.CorrelationId);
    })
    .then(function (result) { console.log(result); })
    .then( redirectToList )
    .catch( onSaveError )
    .finally( unblock );
}

Answer 2

Make use of a custom deferred (promise), using Angular's $q. Make sure that you inject the $q dependency in your factory and create the deferred at the start of your factory:

var deferred = $q.defer()

At the point where the promise must resolve, add:

deferred.resolve();

And make sure you return the promise at the bottom of your syncCompleted function:

return deferred.promise;

Additionally, you could add deferred.reject() if you also want error-handling. Furthermore, you could add arguments to reject() and resolve() if you need to.

As an alternative, you could achieve the same goal without using $q. $timeout() also returns a promise, and if you return a promise in the callback given to then(), it will kind of 'replace' the 'parent' promise.