jquery - serializing ajax calls with WHEN and DONE

Question

I have few ajax methods and I want to execute some code after successful completion of all these ajax calls. I can't alter or redefine the ajax methods. Please let me know , how to achieve this.

I tried with WHEN but it get called immediately and not waiting for all calls to be completed.(As suggested , once I added return in loadData1() , it works fine.)

Now my problem is , if any of the request(loadData1() or loadData2()) is having error then "then()" is not getting executed . Please let me know , how to achieve this.

var load1 = loadData1();
var load2 = loadData2();
var load3 = loadData3();
var load4 = loadData4();

$.when(load1, load2, load3,load4).then(function () {
        console.log("All done");
});

function loadData1() {
    return $.getJSON("http://10.1.2.3/cgi-bin/GetData1.cgi", function (data) {
        console.log(data);
    });
}

Thanks

`loadData1` need to return the promise, else you can't do anything — Arun P Johny, Mar 29 '16 at 05:53
@ArunPJohny , what it should return? . Can you elaborate or alter my code? — JavaUser, Mar 29 '16 at 05:56
`function loadData1() { return $.getJSON("http://10.1.2.3/cgi-bin/GetData1.cgi", function (data) { console.log(data); }); }` - but since you said you can't modify the ajax methods, not sure — Arun P Johny, Mar 29 '16 at 05:57
@ArunPJohny , could you please see my edit and help on this? — JavaUser, Mar 29 '16 at 07:13

score 2 · Answer 1 · edited May 23 '17 at 10:28

2

You can use function like

 function first() {
   return $.ajax(...);
}

function second(data, textStatus, jqXHR) {
   return $.ajax(...);
}

function third(data, textStatus, jqXHR) {
   return $.ajax(...);
}

function main() {
    first().then(second).then(third);
}

check this for more detail jquery-promises

edited May 23 '17 at 10:28

Community

1
1

answered Mar 29 '16 at 05:54

Dhaval Patel

7,471
6
37
70

Hi Dhaval , could you please see my edit and clarify my query? – JavaUser Mar 29 '16 at 07:13
means , there is no fix for this? – JavaUser Mar 29 '16 at 07:41
@JavaUser: no there is you can use the callback in your function – Dhaval Patel Mar 29 '16 at 07:48

score 1 · Answer 2 · answered Mar 29 '16 at 05:58

Try this

var promise = loadData1();


var load2 = loadData2();
var load3 = loadData3();
var load4 = loadData4();

 promise.then(loadData2).then(loadData3).then(loadData4).then(function (E) {
                       //
                    });

function loadData1() {
    $.getJSON("http://10.1.2.3/cgi-bin/GetData1.cgi", function (data) {
        console.log(data);
    });

var deferred = new $.Deferred();
    deferred.resolve();
    return deferred.promise();
}

BrightShadow · Answer 3 · 2016-03-29T06:39:12.293

You should return something in your functions. This is the first thing. The second when you are waiting you must wait for results of functions so instead of load1, load2, load3, load4 use load1(), load2(), load3(), load4().

Below an example simulating 4 Deferred functions (your ajax requests).

// load1, load2, load3, load4 are defined to simulate promises and some work behind it

// here is var load1 = loadData1();
var load1 = function () {
    return $.Deferred(function(defer) {
        setTimeout(function() {
            $('#log').append('<div>loadData1()</div>');
            defer.resolve();
        }, 150);
    });
}

// here is var load2 = loadData2();
var load2 = function () {
    return $.Deferred(function(defer) {
        setTimeout(function() {
            $('#log').append('<div>loadData2()</div>');
            defer.resolve();
        }, 600);
    });
}

// here is var load3 = loadData3();
var load3 = function () {
    return $.Deferred(function(defer) {
        setTimeout(function() {
            $('#log').append('<div>loadData3()</div>');
            defer.resolve();
        }, 300);
    });
}

// here is var load4 = loadData4();
var load4 = function () {
    return $.Deferred(function(defer) {
        setTimeout(function() {
            $('#log').append('<div>loadData4()</div>');
            defer.resolve();
        }, 200);
    });
}


$(document).ready(function() {
    $.when(load1(), load2(), load3(), load4())
        .then(function () {
            $('#log').append('<div>All done.</div>');
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

score 1 · Answer 4 · answered Mar 29 '16 at 08:30

You can try to use a utility function like

function allCompleted(array) {
  var deferred = jQuery.Deferred(),
    counter = array.length,
    results = [];
  $.each(array, function(i, item) {
    item.always(function() {
      results[i] = [].slice.call(arguments, 0)
      if (--counter == 0) {
        deferred.resolveWith(undefined, results);
      }
    });
  });
  return deferred.promise();
}

then

var load1 = loadData1();
var load2 = loadData2();
var load3 = loadData3();
var load4 = loadData4();

allCompleted([load1, load2, load3,load4]).then(function () {
        console.log("All done");
});

Demo: Fiddle

@JavaUser check the fiddle, the error also is working – Arun P Johny Mar 29 '16 at 08:54 — Arun P Johny, Mar 29 '16 at 08:54

jquery - serializing ajax calls with WHEN and DONE

4 Answers4