jQuery-使用WHEN和DONE序列化ajax调用

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

Answer 1

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

Answer 2

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();
}

Answer 3

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> 

Answer 4

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