如何在所有 ajax 请求完成后执行一个函数？

9 浏览
0 Comments

如何在所有 ajax 请求完成后执行一个函数？

如何将一个函数等待另一个函数中的所有jQuery Ajax请求完成？

简而言之，我需要在执行下一个操作之前等待所有Ajax请求完成。但是怎么做？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

如果你想知道你的文档中所有ajax请求何时完成，无论有多少请求存在，只需使用以下方式触发$.ajaxStop事件：

$(document).ajaxStop(function () {
  // 0 === $.active
});

在这种情况下，你不需要猜测应用程序中有多少个请求在执行并且将来可能完成，也不需要深入研究函数复杂的逻辑，或找出哪些函数发出HTTP(S)请求。

这里的$.ajaxStop也可以绑定到你认为可能被请求修改的任何HTML节点。

更新：
如果你想使用ES语法，那么可以对已知的ajax方法使用Promise.all：

Promise.all([ajax1(), ajax2()]).then(() => {
  // all requests finished successfully
}).catch(() => {
  // all requests finished but one or more failed
})

有趣的一点是，它同时适用于Promises和$.ajax请求。

这里是jsFiddle演示。

更新2：
使用async/await语法的最新版本：

try {
  const results = await Promise.all([ajax1(), ajax2()])
  // do other actions
} catch(ex) { }

0
0 Comments

现在，jQuery为此定义了一个when函数。

它接受任意数量的Deferred对象作为参数，并在它们全部解析后执行一个函数。

这意味着，如果你想发起（例如）四个ajax请求，然后在它们完成后执行一个操作，你可以做这样的事情：

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});
function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

在我看来，这使得语法更加清晰，避免牵涉到任何全局变量，例如ajaxStart和ajaxStop，这可能会在页面发展过程中产生不良影响。

如果你事先不知道你需要等待多少个ajax参数（即你想使用可变数量的参数），这仍然可以完成，但需要稍微熟练。请参见将Deferred数组传递给$.when()(和也许jQuery.when故障排除与可变数量的参数)。

如果你需要更深入地控制ajax脚本等的失败模式，你可以保存由.when()返回的对象——这是一个涵盖所有原始ajax查询的jQueryPromise对象。你可以在它上调用.then()或.fail()来添加详细的成功/失败处理程序。

0