Recursive Async function

Question

I have a question about a problem I am bumping into. I am using AngularJS as my framework and do not have access to jQuery nor Lodash.

The problem

I have a function called "refresh". That function makes an async call via angular $http to get new data from the server. The server only gives 25 new updates to me from the date I specify. So to get all the new messages I need to call the server (and update the "updateDate" everytime I get data) until it tells me that it has no more messages (empty array).

Code example

$scope.refresh = function () {
    var date = new Date();

    $http({
        method: 'GET',
        url: 'http://path.to.my.server',
        timeout: 6000
    }).then(function (success) {  
        date = success.date[0].date; //0 is always the newest message                     
        callback(success.data);       
        //Do some stuff with the data
    }, function (error) {
        console.error("Could not retrieve new messages: \n", error.data);
        errcallback(error);
    });

}

What I have tried

I have tried to get set the request in a separate function and make calls to it like you would do with a normal a-sync function.

I have also tried a while loop and setting a boolean when I am done with collecting. The only problem is that a while loop doesn't wait for the call to end (otherwise it wouldn't be async) and makes quite an impressive loop (not yet infinite, but enough to crash my program).

I was thinking about a for loop, but I do not know how much iterations I should make. It could be 1 but also could also be 5 or more.

I know how recursive functions work, but I do not know how I should use an async recursive function. Any advice or solutions are welcome. (I won't have to be recursive if anyone knows an other solution)

So you have already tried executing$scope.refresh() in your .then() callback? — Patrick Evans
– Patrick Evans, Commented Apr 21, 2016 at 13:52

T.J. Crowder · Accepted Answer · 2016-04-21 13:52:54Z

4

There's nothing particularly special about making async functions recursive, you just don't have to worry about running out of stack.

Just isolate your ajax call into a function, and have that function call itself until it has a complete picture of the data:

$scope.refresh = function () {
    var date = new Date();
    var results = [];

    gather();

    function gather() {
        $http({
            method: 'GET',
            url: 'http://path.to.my.server',
            timeout: 6000
            // presumably using `date` here?
        }).then(function(success) {
            // This seems to assume you'll always have at least
            // one row, which doesn't seem to match with your description
            date = success.data[0].date; //0 is always the newest message                     
            if (thereAreNewResults) {
                results.push.apply(results, success.data);
                gather();
            } else {
                // We're done
                callback(results);       
            }
        }, function (error) {
            console.error("Could not retrieve new messages: \n", error.data);
            errcallback(error);
        });
    }
};

That's not meant to be full-formed and perfect, but it should send you in the right direction.

Note my if (thereAreNewResults). I would have thought that would be if (success.data.length) but the code in your question seemed to suggest there'd always be at least one row, so adjust as appropriate.

answered Apr 21, 2016 at 13:52

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr.wiseguy Over a year ago

Worked like a charm! I didn't know that you could create a function within a function.

AlainIb · Accepted Answer · 2016-04-21 13:56:57Z

I will make a recursive function who get the data :

$scope.refresh = function () {

    $scope.allDatas = [];

    var getData = function(date){   
        $http({
            method: 'GET',
            url: 'http://path.to.my.server'+/ date , // should format date her
            timeout: 6000
        }).then(function (success) {  
            date = success.date[0].date; //0 is always the newest message                
            //Do some stuff with the data; all the datas will be available in $scope.allDatas
            $scope.allDatas = $scope.allDatas.concat(success.data);     
            // call again ? 
            if( /* decide when you stop getting data */ ){
                getData(date);
            }
        }, function (error) {
            console.error("Could not retrieve new messages: \n", error.data);
            errcallback(error);
        });
    }
    var date = new Date();
    // launch the function
    getData(date);  
}

Collectives™ on Stack Overflow

Recursive Async function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related