Chain ajax and execute it in sequence. Jquery Deferred

Question

I have 3 processes that needs ajax to complete. But it is asynchronous and it fails to do what I wanted to do..

Lets say:

function a(param1, param2) {
     $.post(..., function(result){
         if(result){
            b();
         } else {
            console.log("failed a");
         }
     })
}

function b() {
      $.post(..., function(result){
         if(result){
            c();
         } else {
            console.log("failed b");
         }
     })
}

function c() {
     $.post(..., function(result){
         if(result){
            console.log("successful");
         } else {
            console.log("failed b");
         }
     })
}

I want it to execute like this

a
b
c

That code will work perfectly, as you can see.. but if use a loop.

 var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

 $.each(data, function(k,v){
      a(v.param1, v.param2)
 });

It will not work as expected and will just do:

a
a
b
b
c
c

instead of

a
b
c
a
b
c

Solution 1

There are many ways to write this kind of thing.

A flexible approach is separate "actions" from "sequence", allowing :

• functions a, b, c to initiate an asynchronous (ajax) action, with no knowledge of how they are to be sequenced
• a, b, c to be reusable, as part of one or more sequences or individually, as required.

Here's a way to code this approach, using .then() exclusively for the chaining logic :

function a() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('a').promise();//convert success to failure.
    }, function() {
        return 'a';//continue on failure path.
    });
}
function b() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('b').promise();//convert success to failure.
    }, function() {
        return 'b';//continue on failure path.
    });
}
function c() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('c').promise();//convert success to failure.
    }, function() {
        return 'c';//continue on failure path.
    });
}

a().then(b).then(c).then(function() {
    console.log("successful");
}, function(id) {
    console.log("failed: " + id);
});

Alternatively, if you want to have a single asynchronous function, a, called from within a loop then the code could be something like this :

function a(obj) {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject(obj.id).promise();//convert success to failure.
    }, function() {
        return obj.id;//continue on failure path.
    });
}

var data = [{id:'A', param1:1235, param2:3214},  {id:'B', param1:5432, param2:9876}];
//Note how IDs are included so these data objects can be identified later in failure cases.

var dfrd = $.Deferred();//starter Deferred for later resolution.
var p = dfrd.promise();//A promise derived from the starter Deferred, forming the basis of a .then() chain.

//Build a .then() chain by assignment
$.each(data, function(i, obj) {
    p = p.then( function() {
        return a(obj);
    });//By not including a fail handler here, failures will pass straight through to be handled by the terminal .then()'s fail handler.
});

//Chain a terminal .then(), with success and fail handlers.
p.then(function() {
    console.log("successful");
}, function(id) {
    console.log("failed: " + id);
});

dfrd.resolve();//Resolve the starter Deferred to get things started.

Solution 2

You can chain asynchronous calls like ajax calls using jQuery's deferred object and using 'then'.

You can also change it to use functions that returns a deferred promise object, instead of an ajax call as I have in my example.

http://jsfiddle.net/q4cFv/

(Example with async function: http://jsfiddle.net/q4cFv/1/)

$(function() {
    var delay = 3,
        span = $('span'),
        posts = [
            {
                input1: 'My name 1',
                input2: 'My address 1',
                input3: 'My country 1'
            },
            {
                input1: 'My name 2',
                input2: 'My address 2',
                input3: 'My country 2'
            },
            {
                input1: 'My name 3',
                input2: 'My address 3',
                input3: 'My country 3'
            },
            {
                input1: 'My name 4',
                input2: 'My address 4',
                input3: 'My country 4'
            }
        ],
        looper = $.Deferred().resolve();

    $.each(posts, function(i, data) {
        looper = looper.then(function() {
            return $.ajax({
                data: {
                    json: JSON.stringify(data),
                    delay: delay
                },
                method: 'post',
                url: '/echo/json/',
                dataType: 'json'
            }).done(function(response) {
                span.append('Response:<br />');
                for(key in response) {
                    span.append(key + ': ' + response[key] + '<br />');
                }
                $('span').append('Waiting ' + delay + ' seconds<br /><br />');
            });
        });
    });
});

Solution 3

I see that c doesn't depend of b result, and b doesn't depend of a result.

Following the GRASP principles (http://en.wikipedia.org/wiki/GRASP_(object-oriented_design), a mustn't know b and b mustn't know c.

When we program, to remember the GRASP principles or guidelines is very important.

High Cohesion and Low Coupling mean that our code will be better, more reusable and easier to maintain.

The main function which knows a, b, and c must build the chained calls.

The functions would be:

    function a(param1, param2) {

        var deferred = $.Deferred();

        console.log("    function a: begin. Params " + param1 + " and " + param2);

        mockPost("a_url").done(function() {
            console.log("    function a: end ok. Params " + param1 + " and " + param2);
            deferred.resolve();
        }).fail(function() {
            console.log("    function a: end fail. Params " + param1 + " and " + param2);
            deferred.reject();
        });

        return deferred.promise();
    }

    function b() {

        var deferred = $.Deferred();

        console.log("    function b: begin");

        mockPost("b_url").done(function() {
            console.log("    function b: end ok.");
            deferred.resolve();
        }).fail(function() {
            console.log("    function b: end fail.");
            deferred.reject();
        });

        return deferred.promise();
    }

    function c() {

        // We suppose that c function calls to post function and anything more
        return mockPost("c_url");
    }

The main function would be:

    // Array with params for a function (a function is the first link in chain)
    var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

    // Array with calls to each fixed sequence a, b, and c. We iterate over data array
    var arrayFunctions = [];
    $.each(data, function(i,obj) {
        arrayFunctions.push(
            function() {
                console.log("Params in data with index " + i + ":");

                // We define the fixed sequence: a with params, b without params and c without params 
                return $.iterativeWhen( 
                    function() {
                        return a(obj.param1, obj.param2);
                    },
                    b,
                    c
                );
            }
        )
    });

    // Start the global process
    $.iterativeWhen.apply($, arrayFunctions)
    .done(function() {
        console.log ("----------------");
        console.log ("> Global Success");       
    })
    .fail(function() {
        console.log ("--------------");
        console.log ("> Global Fail");
    });

$.iterativeWhen doesn't exist in jQuery, so I have built it. It works with jQuery 1.8 and later versions.

$.iterativeWhen = function () {

    var deferred = $.Deferred();
    var promise = deferred.promise();

    $.each(arguments, function(i, obj) {

        promise = promise.then(function() {
            return obj();
        });
    });

    deferred.resolve();

    return promise;
};

The mockPost function simulates a call to $.post with a success probability:

function mockPost(url) {

        var deferred = $.Deferred();

        setTimeout(function() {
            if (Math.random() <= 0.9) {
                console.log("        request url: " + url +  "... ok");
                deferred.resolve();
            } else {
                console.log("        request url: " + url +  "... fail");
                deferred.reject();
            }
        }, 1000);

        return deferred.promise();
    }

The log output is:

Params in data with index 0: 
    function a: begin. Params 1235 and 3214 
        request url: a_url... ok 
    function a: end ok. Params 1235 and 3214 
    function b: begin 
        request url: b_url... ok 
    function b: end ok. 
        request url: c_url... ok 
Params in data with index 1: 
    function a: begin. Params 5432 and 9876
        request url: a_url... ok
    function a: end ok. Params 5432 and 9876 
    function b: begin 
        request url: b_url... ok 
    function b: end ok. 
        request url: c_url... ok 
---------------- 
> Global Success 

jsFiddle here: http://jsfiddle.net/E2tp3/

Solution 4

Your problem is that you're calling all the a s at once but you want to wait for the first cycle before going to the next. You want to wait for the previous 'a' cycle to finish before you start the next cycle.

Let's assume a,b,c accept a callback, and pass it on,

a would look like

function a(param1, param2,callback) {
     $.post(..., function(result){
         if(result){
            b(callback);
         } else {
            console.log("failed a");
         }
     })
}

b would go like:

function b(callback) {
      $.post(..., function(result){
         if(result){
            c(callback);
         } else {
            console.log("failed b");
         }
     })
}

And c would look like:

function c(callback) {
     $.post(..., function(result){
         if(result){
            console.log("successful");
         } else {
            console.log("failed b");
         }
         callback();
     })
}

This lets us know when a cycle is complete. Which lets us write:

var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

var index = 0;
(function updateData(){
    a(data[index].param1,data[index].param2,function(){ //call a with the data
        index++;//update the index 
        updateData(); // start the next cycle
    });
});

Solution 5

Here is an wonderfully simple and highly effect AJAX chaining / queue plugin. It will execute you ajax methods in sequence after each other.

It works by accepting an array of methods and then executing them in sequence. It wont execute the next method whilst waiting for a response.

//--- THIS PART IS YOUR CODE -----------------------

$(document).ready(function () {

var AjaxQ = [];
AjaxQ[0] = function () { AjaxMethod1(); }
AjaxQ[1] = function () { AjaxMethod2(); }
AjaxQ[3] = function () { AjaxMethod3(); }

//Execute methods in sequence
$(document).sc_ExecuteAjaxQ({ fx: AjaxQ });

});

//--- THIS PART IS THE AJAX PLUGIN -------------------

$.fn.sc_ExecuteAjaxQ = function (options) {

//? Executes a series of AJAX methods in dequence

var options = $.extend({

    fx: [] //function1 () { }, function2 () { }, function3 () { }

}, options);

if (options.fx.length > 0) {

    var i = 0;

    $(this).unbind('ajaxComplete');
    $(this).ajaxComplete(function () {

        i++;
        if (i < options.fx.length && (typeof options.fx[i] == "function")) { options.fx[i](); }
        else { $(this).unbind('ajaxComplete'); }

    });

    //Execute first item in queue
    if (typeof options.fx[i] == "function") { options.fx[i](); }
    else { $(this).unbind('ajaxComplete'); }

} 

}

View more solutions

Comments

[Joey Hipolito]

i think this is what I am looking for... deferred.

[Benjamin Gruenbaum]

This is Sample Code it is intended for learning . For example you need to check if you finished the array and not do recursion then

[Joey Hipolito]

i should get the length of the array right? haha,, sorry about that.. I press the add comment before thinking

[Benjamin Gruenbaum]

You need to check data.length after the check for index++ . Only call updateData if the index is in bounds.

[Derek Adair]

thanks for the deferred example, exactly what i was looking for!!

[ekkis]

so if this were in a function, would you return dfrd so the caller can resolve it? or would you resolve it here and return the promise so the caller can append .then()s to it?