关于javascript：jquery – 使用WHEN和DONE序列化ajax调用


jquery - serializing ajax calls with WHEN and DONE

我有几个ajax方法，我想在成功完成所有这些ajax调用后执行一些代码。 我无法改变或重新定义ajax方法。
请让我知道，如何实现这一目标。

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

现在我的问题是，如果任何请求(loadData1()或loadData2())有错误，那么"then()"没有被执行。 请让我知道，如何实现这一目标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
    });
}

谢谢

相关讨论

你可以使用像这样的功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 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

相关讨论

您可以尝试使用像这样的实用程序功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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();
}

然后

1
2
3
4
5
6
7
8
var load1 = loadData1();
var load2 = loadData2();
var load3 = loadData3();
var load4 = loadData4();

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

演示：小提琴

相关讨论

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

下面是一个模拟4个延迟函数的例子(你的ajax请求)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 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('loadData1()');
            defer.resolve();
        }, 150);
    });
}

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

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

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


$(document).ready(function() {
    $.when(load1(), load2(), load3(), load4())
        .then(function () {
            $('#log').append('All done.');
        });
});
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

试试这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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();
}