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

Question

我的 ajax 方法很少，我想在成功完成所有这些 ajax 调用后执行一些代码。我无法更改或重新定义 ajax 方法。 请让我知道，如何实现这一点。

我尝试使用 WHEN，但它会立即被调用，而不是等待所有调用完成。（如建议的那样，一旦我在 loadData1() 中添加 return，它就可以正常工作。）

现在我的问题是，如果任何请求（loadData1() 或 loadData2()) 出现错误，则“then()”不会被执行。请告诉我，如何实现这一目标。

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

谢谢

Answer 1

你可以使用类似的功能

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

查看更多详情jquery-promises

Answer 2

试试这个

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

你应该在你的函数中返回一些东西。这是第一件事。第二个当你等待时，你必须等待函数的结果，所以不要使用load1, load2, load3, load4，而是使用load1(), load2(), load3(), load4()。

下面是一个模拟 4 个延迟函数（您的 ajax 请求）的示例。

// 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

您可以尝试使用类似的实用功能

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

然后

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

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

演示：Fiddle