Async Recursive Function

Question

Async Recursive Function

I am facing a challenge with my project. My framework of choice is AngularJS and I do not have access to jQuery or Lodash.

The Issue

In my code, I have a function named "refresh". This function initiates an asynchronous call using angular $http to retrieve new data from the server. The server provides 25 new updates starting from the specified date. To fetch all the new messages, I need to continuously make requests to the server (updating the "updateDate" each time I receive new data) until there are no more messages (empty array).

Example Code

$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;                     
        callback(success.data);       
        //Data manipulation
    }, function (error) {
        console.error("Could not retrieve new messages: \n", error.data);
        errcallback(error);
    });
}

Attempts Made

I attempted to separate the request into a different function and call it multiple times as you would with a standard async function.

I also tried utilizing a while loop and using a boolean variable to indicate when data collection is complete. However, the issue with a while loop is that it does not wait for the call to finish, resulting in a potentially infinite loop that could crash the program.

Considering using a for loop, but unsure about the number of iterations required. It might be just one, but it could also be five or even more.

I understand how recursive functions operate, but implementing an async recursive function is where I face difficulty. Any suggestions or solutions are highly appreciated. (If there's an alternative approach that doesn't involve recursion, I'm open to exploring that as well)

javascript angularjs rest asynchronous recursion

Answer 1

Answer №1

When it comes to making async functions recursive, the key advantage is that you don't have to worry about stacking issues.

To implement this approach, simply create a function for your ajax call and let it recursively call itself until it has gathered all the necessary data:

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

    gather();

    function gather() {
        $http({
            method: 'GET',
            url: 'http://path.to.my.server',
            timeout: 6000
            // using `date` here
        }).then(function(success) {
            date = success.data[0].date;                    
            if (thereAreNewResults) {
                results.push.apply(results, success.data);
                gather();
            } else {
                callback(results);       
            }
        }, function (error) {
            console.error("Could not retrieve new messages: \n", error.data);
            errcallback(error);
        });
    }
};

This code snippet serves as a starting point rather than providing a complete solution. Feel free to customize it according to your specific requirements.

Take note of my if(thereAreNewResults). While I initially thought if(success.data.length) would be more appropriate, your question implied there will always be at least one row of data, so adjust accordingly.

Answer 2

When it comes to making async functions recursive, the key advantage is that you don't have to worry about stacking issues.

To implement this approach, simply create a function for your ajax call and let it recursively call itself until it has gathered all the necessary data:

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

    gather();

    function gather() {
        $http({
            method: 'GET',
            url: 'http://path.to.my.server',
            timeout: 6000
            // using `date` here
        }).then(function(success) {
            date = success.data[0].date;                    
            if (thereAreNewResults) {
                results.push.apply(results, success.data);
                gather();
            } else {
                callback(results);       
            }
        }, function (error) {
            console.error("Could not retrieve new messages: \n", error.data);
            errcallback(error);
        });
    }
};

This code snippet serves as a starting point rather than providing a complete solution. Feel free to customize it according to your specific requirements.

Take note of my if(thereAreNewResults). While I initially thought if(success.data.length) would be more appropriate, your question implied there will always be at least one row of data, so adjust accordingly.

Answer 3

Answer №2

I plan to create a recursive function that will fetch the data:

$scope.fetchData = function () {

    $scope.allData = [];

    var getData = function(currentDate){   
        $http({
            method: 'GET',
            url: 'http://my.server.path'+/ currentDate , // make sure to format the date correctly
            timeout: 6000
        }).then(function (success) {  
            currentDate = success.date[0].date; //assuming 0 is always the most recent message                
            //Perform operations on the data; all of it will be accessible in $scope.allData
            $scope.allData = $scope.allData.concat(success.data);     
            // should we call the function again? 
            if( /* add condition to determine when to stop fetching data */ ){
                getData(currentDate);
            }
        }, function (error) {
            console.error("Could not fetch new messages: \n", error.data);
            errcallback(error);
        });
    }

    var currentDate = new Date();
    // initiate the function
    getData(currentDate);  
}

Answer 4

I plan to create a recursive function that will fetch the data:

$scope.fetchData = function () {

    $scope.allData = [];

    var getData = function(currentDate){   
        $http({
            method: 'GET',
            url: 'http://my.server.path'+/ currentDate , // make sure to format the date correctly
            timeout: 6000
        }).then(function (success) {  
            currentDate = success.date[0].date; //assuming 0 is always the most recent message                
            //Perform operations on the data; all of it will be accessible in $scope.allData
            $scope.allData = $scope.allData.concat(success.data);     
            // should we call the function again? 
            if( /* add condition to determine when to stop fetching data */ ){
                getData(currentDate);
            }
        }, function (error) {
            console.error("Could not fetch new messages: \n", error.data);
            errcallback(error);
        });
    }

    var currentDate = new Date();
    // initiate the function
    getData(currentDate);  
}

Async Recursive Function

Answer №1

Answer №2

Similar questions

Is it possible to establish restrictions on file uploads using Firebase authentication and storage without the need for an intermediary server?

What is the process for validating a jQuery/AJAX form?

Setting the default typing language in Protractor: A step-by-step guide

What is the best way to duplicate a set of objects in ThreeJS?

Trigger a popup notification with JavaScript when

"Creating dynamic movement for a collection of layered images through asynchronous operations in JavaScript: A step

Using a Key to Activate the Trigger Button Instead of a Mouse Click

The command "npm run build" is not running successfully, likely due to npm not being able to interpret ES6 syntax

Dealing with unexpected errors that occur and are displayed in the browser's console when using AngularJS

Switching up the content of an HTML page with JavaScript or JQuery: what you need

Engaging with Electron through an HTML file

Unable to halt ajax request by pressing cancel button

What is the process of compiling TypeScript code?

Angular enables draggable and resizable components

Executing a nested function before moving on to the subsequent code statements

When decoding a JWT, it may return the value of "[object Object]"

The computed value in Vue.js does not execute during initialization

Finding the Ideal Location for Controllers in an Express.js Project

Assigning a Value to a Dropdown Menu in Angular

Issue encountered while generating JSON in PHP