CODEWITHSUNDEEP
javascriptpromise
MadeInDreams
MadeInDreams

Reputation: 2126

Javascript Promise Pending

I have finally understood promise and implemented it and all ajax request that query the database is using it. Now i would like to display some kind of loading progress animation nothing to fancy.

According to MDN documentation found here

They state that a Promise is in one of these states:

I would like to know how i can take advantage of the pending state to display my animation.

Example of the Promise:

function functionName(param1,param2,...){
      return new Promise(function (resolve, reject) {

         $.ajax({
               // ajax param here
               success: function (data, status) {
                         resolve(data);
                         return;
                        },
                        error: function (xhr, desc, err) {
                        console.log(xhr);
                        console.log("Details: " + desc + "\nError:" + err);
                        return;
                        }
                });
       });
};

And a function that uses it;

$(document.body).on("event", "element", function (event) {
        event.preventDefault();
        var data = functionName(param1,param2,...).then(function (response) {
        data = response;
            // handeling data from Promise function
         }, function (error) {
        console.error("ERROR !", error);
        return;
        });

});

So I am wondering how we can take advantage of the pending state to display an animation?

Upvotes: 0

Views: 1980

Answers (1)

Nitin Garg
Nitin Garg

Reputation: 896

You can modify your code something like below

$(document.body).on("event", "element", function (event) {
    event.preventDefault();
    var data = functionName(param1,param2,...).then(function (response) {
    // End your animation here like hide progress bar        
    data = response;
    // handeling data from Promise function
}, function (error) {
    // End your animation here like hide progress bar        
    console.error("ERROR !", error);
    return;
});
// Start your animation here like show progress bar

Upvotes: 1

Related Questions