等到所有 jQuery ajax 调用完成（完成或拒绝）[重复]答案

【问题标题】：Wait until all jQuery ajax calls are completed (done or rejected) [duplicate]等到所有 jQuery ajax 调用完成（完成或拒绝）[重复]
【发布时间】：2015-08-31 11:36:41
【问题描述】：

我查看了许多类似的问题，但建议的解决方案并非在所有情况下都按预期工作。当所有 ajax 调用都成功完成时，以下代码可以正常工作，但如果任何 ajax 调用碰巧失败，则立即调用 onComplete：

var deferredArray = $('.preload').map(function() {
    return $.get(this.href)
});
$.when.apply($, deferredArray).then(onComplete, onComplete);

所以可能有两种情况：

所有延迟调用都成功，然后调用onComplete - 工作正常；
某些延迟调用失败（返回 HTTP 400 错误请求），然后立即调用 onComplete，而不是等待其他延迟调用。

第二种情况代表我的问题。在调用 onComplete 之前，无论状态如何，它都应该始终等待所有调用完成。

我使用 jQuery 1.7.1，因为它内置在框架中。如果是版本问题，我可以升级，但我更愿意保留当前版本。

【问题讨论】：

你看过api.jquery.com/ajaxcomplete吗？
@KrisHollenbeck 但在每个完成的 Ajax 请求上都会触发 ajaxComplete 事件。当我的所有 Ajax 请求完成时，我只需要触发一次。这就是为什么我必须使用when。
对不起，我的意思是发布ajaxStop() 链接。在所有 ajax 事件完成后，我使用 ajaxStop() 运行东西。通常，如果我需要做某种与布局相关的 JavaScript 工作并确保数据首先到位，这会起作用。但它可能不适用于您的用例。 api.jquery.com/ajaxStop
@lagivan 见 stackoverflow.com/questions/28131082/… , stackoverflow.com/questions/30790604/…
看起来这个问题也可能被问过。看这里..stackoverflow.com/questions/5824615/…

标签： javascript jquery ajax wait

【解决方案1】：

你可以试试ajaxStop()。虽然不是最优雅的解决方案。

$( document ).ajaxStop(function() {
  // do some stuff now that all the ajax stuff has stopped
})

另请注意：

如果在全局选项设置为 false 的情况下调用 $.ajax() 或 $.ajaxSetup()，则不会触发 .ajaxStop() 方法。

【讨论】：

【解决方案2】：

我不确定这是否超出了您正在寻找的解决方案类型的范围，但我最近一直在利用 bluebird.js 来包装我所有的 jquery ajax 调用。

例如：

Promise.resolve($.get("http://www.google.com")).then(function() {});

这允许我做的是然后执行 Promise.all 它将等待所有 ajax 调用完成。每个单独的 Promise 都可以通过或失败，但 .all 上的 .then（或 .spread）只有在它们都成功时才会被调用。

var aPass = function(){
    return Promise.resolve($.get("/echo/json/"))
};

var aFail = function(){
    return Promise.resolve($.get("/echo/jsonFake/")) // this will fail
};

var allPass = [aPass(), aPass(), aPass()];

var oneFails = [aPass(), aPass(), aFail()];


Promise.all(allPass).spread(function(a,b,c){
    console.log("All Done!");
}).catch(function(){
    console.log("NEVER FAILS!");
});;

Promise.all(oneFails).spread(function(a,b,c){
    console.log("never goes in here");
}).catch(function(){
    console.log("FAILED");
});

这是一个演示这个的 jsfiddle：http://jsfiddle.net/ys598t4s/2/

【讨论】：