等到所有jQuery ajax调用完成(完成或拒绝)[重复]

时间:2022-08-23 18:04:26

This question already has an answer here:

这个问题在这里已有答案:

I've looked through many similar questions but the proposed solutions do not work in all cases as expected. The following code works fine when all ajax calls are successfully done but if any of ajax calls happens to fail, then onComplete is immediately called:

我已经查看了许多类似的问题,但所提出的解决方案并不像所期望的那样适用于所有情况。当所有ajax调用成功完成但以下任何ajax调用失败时,以下代码工作正常,则立即调用onComplete:

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

So there can be two cases:

所以可能有两种情况:

  • all deferred calls are successful, then onComplete is called afterwards - works fine;
  • 所有延期调用都成功,然后调用onComplete - 工作正常;
  • some deferred call fails (returns HTTP 400 Bad request), then onComplete is called immediately not waiting for other deferred calls.
  • 某些延迟调用失败(返回HTTP 400 Bad请求),然后立即调用onComplete而不等待其他延迟调用。

The second case represents my problem. It should always wait for all calls to complete regardless of the status before calling onComplete.

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

I use jQuery 1.7.1 as it's built into the framework. If the issue is due to the version, I can upgrade but I'd prefer to keep the current version.

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

2 个解决方案

#1


2  

You could try ajaxStop(). Allbeit not the most elegant solution.

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

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

Also note:

另请注意:

If $.ajax() or $.ajaxSetup() is called with the global option set to false, the .ajaxStop() method will not fire.

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

#2


2  

I'm not sure if this outside of the scope of the types of solutions you're looking for, but I've recently been taking advantage of bluebird.js to wrap all my jquery ajax calls.

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

For example:

例如:

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

What this allows me to do is then perform a Promise.all which will then wait for all the ajax calls to be complete. Each individual promise can pass or fail, but .then (or .spread) on the .all will only be called if they all succeed.

这允许我做的是然后执行Promise.all,然后等待所有的ajax调用完成。每个单独的承诺可以通过或失败,但是.then(或.spread)只有在它们全部成功时才会被调用.all。

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

Here is a jsfiddle demonstrating this: http://jsfiddle.net/ys598t4s/2/

这是一个证明这一点的jsfiddle:http://jsfiddle.net/ys598t4s/2/

#1


2  

You could try ajaxStop(). Allbeit not the most elegant solution.

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

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

Also note:

另请注意:

If $.ajax() or $.ajaxSetup() is called with the global option set to false, the .ajaxStop() method will not fire.

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

#2


2  

I'm not sure if this outside of the scope of the types of solutions you're looking for, but I've recently been taking advantage of bluebird.js to wrap all my jquery ajax calls.

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

For example:

例如:

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

What this allows me to do is then perform a Promise.all which will then wait for all the ajax calls to be complete. Each individual promise can pass or fail, but .then (or .spread) on the .all will only be called if they all succeed.

这允许我做的是然后执行Promise.all,然后等待所有的ajax调用完成。每个单独的承诺可以通过或失败,但是.then(或.spread)只有在它们全部成功时才会被调用.all。

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

Here is a jsfiddle demonstrating this: http://jsfiddle.net/ys598t4s/2/

这是一个证明这一点的jsfiddle:http://jsfiddle.net/ys598t4s/2/