Using AngularJS to handle promises within a recursive function

Question

Using AngularJS to handle promises within a recursive function

I have been attempting to implement the AngularJS promise/then functionality with a recursive function, but I am facing an issue where the then-function is not being called. None of the error-, success-, or notify-callbacks are getting triggered.

Below is the code snippet:

Recursive Function

loadSection2 = function() {

    var apiURL = "http://..."

    var deferred = $q.defer();

    $http({
        method: "GET",
        url: apiURL
    }).success(function(result, status, headers, config) {
        console.log(result);
        loadCount++;
        if(loadCount < 10) {
            newSectionArray.push(result);
            loadSection2(); 
        } else {
            loadCount = 0;
            deferred.resolve();
            return deferred.promise;
        }
    }).error(function() {
        return deferred.reject();
    });
    deferred.notify();
    return deferred.promise;
};

Then-Function

loadSection2().then(function() {
    console.log("NEW SECTIONS LOADED, start adding to document");
    addContent();
}, function() {
    console.log("ERROR CALLBACK");
}, function() {
    console.log("NOTIFY CALLBACK");
}).then(function() {
    loadScrollActive = false;
});

It seems like the then should trigger the initial notify-callback at least. However, no callbacks are being invoked. Could it be that then does not work well with recursive functions?

javascript angularjs recursion promise

Answer 1

Answer №1

UPDATE - 11/11/2015 For those who are not concerned about notifications, here is a more streamlined approach:

loadSection2 = function (){
    var apiURL = "http://..."
    return $http.get(apiURL)
        .then(function(response){
            loadCount++;        
            if (loadCount < 10) {
                newSectionArray.push(response.data);
                return loadSection2();
            }
            loadCount = 0;
        });

};

Previous response can be found below:

You have the option to continuously pass the promise throughout.

loadSection2 = function(deferred) {

    if(!deferred){
        deferred = $q.defer();
    }
    var apiURL = "http://..."

    $http({
        method: "GET",
        url: apiURL
    }).success(function(result, status, headers, config) {
        console.log(result);
        loadCount++;
        if(loadCount < 10) {
            newSectionArray.push(result);
            loadSection2(deferred); 
        } else {
            loadCount = 0;
            deferred.resolve();
            return deferred.promise;
        }
    }).error(function() {
        return deferred.reject();
    });
    deferred.notify();
    return deferred.promise;
};

Answer 2

UPDATE - 11/11/2015 For those who are not concerned about notifications, here is a more streamlined approach:

loadSection2 = function (){
    var apiURL = "http://..."
    return $http.get(apiURL)
        .then(function(response){
            loadCount++;        
            if (loadCount < 10) {
                newSectionArray.push(response.data);
                return loadSection2();
            }
            loadCount = 0;
        });

};

Previous response can be found below:

You have the option to continuously pass the promise throughout.

loadSection2 = function(deferred) {

    if(!deferred){
        deferred = $q.defer();
    }
    var apiURL = "http://..."

    $http({
        method: "GET",
        url: apiURL
    }).success(function(result, status, headers, config) {
        console.log(result);
        loadCount++;
        if(loadCount < 10) {
            newSectionArray.push(result);
            loadSection2(deferred); 
        } else {
            loadCount = 0;
            deferred.resolve();
            return deferred.promise;
        }
    }).error(function() {
        return deferred.reject();
    });
    deferred.notify();
    return deferred.promise;
};

Answer 3

Answer №2

I came up with a unique solution that avoids passing the "deferred" variable around. While it may not be considered the best approach, it is functional and taught me something new (jsfiddle).

27/Jul/15 - I have updated the code to be more concise by eliminating the need to create another promise in f1(). Hopefully, the connection to the original question is now clearer. If not, feel free to leave a comment for clarification.

f1().then(function() {
    console.log("task complete");
});

function f1(counter) {

    if (!counter) {
        counter = 0;
    }

    counter++;
    console.log(counter);

    return asyncTask().then(function() {
        if (counter < 10) {
            return f1(counter);
        } else {
            return;
        }
    });

}

function asyncTask() {
    var deferredTask = $q.defer();

    $timeout(function() {
        deferredTask.resolve();
    }, 100);

    return deferredTask.promise;
}

Answer 4

I came up with a unique solution that avoids passing the "deferred" variable around. While it may not be considered the best approach, it is functional and taught me something new (jsfiddle).

27/Jul/15 - I have updated the code to be more concise by eliminating the need to create another promise in f1(). Hopefully, the connection to the original question is now clearer. If not, feel free to leave a comment for clarification.

f1().then(function() {
    console.log("task complete");
});

function f1(counter) {

    if (!counter) {
        counter = 0;
    }

    counter++;
    console.log(counter);

    return asyncTask().then(function() {
        if (counter < 10) {
            return f1(counter);
        } else {
            return;
        }
    });

}

function asyncTask() {
    var deferredTask = $q.defer();

    $timeout(function() {
        deferredTask.resolve();
    }, 100);

    return deferredTask.promise;
}

Answer 5

Answer №3

Fauphi,

Using recursion is a valid option, although it may not be the most promising approach.

If you have deferreds/promises at your disposal, you can dynamically construct a .then() chain to generate a promise of an array with data.

function loadSection2(arr) {
    return $http({
        method: "GET",
        url: "http://..."
    }).then(function(result, status, headers, config) {
        console.log(result);
        arr.push(result);
        return arr;
    }, function() {
        console.log("GET error");
        return $q.defer().resolve(arr).promise;
        //Alternatively, using $q's .then() simplifies this as...
        //return arr;
    });
};

var newSectionPromise = $q.defer().resolve([]);

for (var i=0; i<10; i++) {
    newSectionPromise = newSectionPromise.then(loadSection2);
}

newSectionPromise().then(function(arr) {
    console.log(arr.length + " new sections loaded. Starting to add them to the document.");
    addContent(arr);
}, function() {
    console.log("ERROR CALLBACK");
}).then(function() {
    loadScrollActive = false;
});

Note: This code is untested.

The previous newSectionArray variable is now created anonymously and passed through the .then() chain without depending on individual GET success or failure. It will appear as arr in the final .then's success handler, where it is then used by addContent(). In doing so, we eliminate the need for maintaining a separate member like newSectionArray in the outer scope.

To further reduce external members, loadSection2 could also be made anonymous.

The explicit notification requirement decreases since:

there is no longer a main deferred object to notify
console.log(result); within the GET success handler provides sufficient notification.

Answer 6

Fauphi,

Using recursion is a valid option, although it may not be the most promising approach.

If you have deferreds/promises at your disposal, you can dynamically construct a .then() chain to generate a promise of an array with data.

function loadSection2(arr) {
    return $http({
        method: "GET",
        url: "http://..."
    }).then(function(result, status, headers, config) {
        console.log(result);
        arr.push(result);
        return arr;
    }, function() {
        console.log("GET error");
        return $q.defer().resolve(arr).promise;
        //Alternatively, using $q's .then() simplifies this as...
        //return arr;
    });
};

var newSectionPromise = $q.defer().resolve([]);

for (var i=0; i<10; i++) {
    newSectionPromise = newSectionPromise.then(loadSection2);
}

newSectionPromise().then(function(arr) {
    console.log(arr.length + " new sections loaded. Starting to add them to the document.");
    addContent(arr);
}, function() {
    console.log("ERROR CALLBACK");
}).then(function() {
    loadScrollActive = false;
});

Note: This code is untested.

The previous newSectionArray variable is now created anonymously and passed through the .then() chain without depending on individual GET success or failure. It will appear as arr in the final .then's success handler, where it is then used by addContent(). In doing so, we eliminate the need for maintaining a separate member like newSectionArray in the outer scope.

To further reduce external members, loadSection2 could also be made anonymous.

The explicit notification requirement decreases since:

there is no longer a main deferred object to notify
console.log(result); within the GET success handler provides sufficient notification.

Using AngularJS to handle promises within a recursive function

Answer №1

Answer №2

Answer №3

Similar questions

The color of the three js cube is charcoal, definitely not a fiery red

How to retrieve the total count of fields in AngularJS

Executing an HTML webpage with npm package.json file

Tips for managing Material-ui's <Autocomplete/> component based on the option's id

There is no index signature in AxiosStatic

Accessing index.html via file:// from Vue-cli template

Is there a way to incorporate locales in calculations involving percentages?

How to utilize an AngularJS filter within a controller

Exploring byte array manipulation in node.js and techniques for data processing

Tips for managing JavaScript errors

Virtual machines have encountered issues when attempting to utilize setTimeout within the browser with vm.runInNewContext

Basic HTML Audio Player Featuring Several Customizable Variables

jQuery allows you to disable all other checkboxes when a specific one is checked

The function defineCall does not exist, causing a sequelize error to occur

How can I perform a string search that doesn't take into account accented characters

``To utilize the ng-class variable within a controller, one can simply assign the desired

Load as soon as the browser is launched

Add multiple controls to a div element

Tips for displaying HTML5 validation messages when the input is changed

Interested in gaining knowledge on how to define basic properties on the model within Angular.JS?