处理 jQuery ajax 异步调用的最佳方法是什么？答案

【问题标题】：What are best way to handle jQuery ajax asynchronous calls?处理 jQuery ajax 异步调用的最佳方法是什么？
【发布时间】：2013-10-28 14:50:22
【问题描述】：

我最近开始了一个使用重型客户端 jQuery/javascripts 的项目。我正在努力让其中一个屏幕正常工作。

我的功能如下：

function init{
  populateTypes();
  populateGroups();
  populateStatuses();
  applyCurrentUserSettings();
}

所有populate* 方法对服务器进行ajax 调用($.ajax) 并填充视图上的一些复选框列表。 applyCurrentUserSettings 方法也发出一个 ajax 请求并在视图上设置当前用户选择。

问题是populate* 方法是异步的，并且通过调用applyCurrentUserSettings 方法，复选框列表“有时”为空并且应用方法失败。

我可以通过在$.ajax 调用中传递async: false 来完成这项工作，或者将每个ajax 调用链接到另一个调用中，但我想知道是否有更好的方法/设计模式来处理这种情况。

【问题讨论】：

使用回调确保依赖于其他函数的函数总是按顺序运行。

标签： jquery ajax design-patterns asynchronous

【解决方案1】：

您可以使所有函数返回延迟并使用$.when。 http://api.jquery.com/jQuery.when/

function populateTypes () {
    //your code
    return $.ajax(...);
}


$.when(populateTypes(), populateGroups(), ...).then(applyCurrentUserSettings);

【讨论】：

【解决方案2】：

我相信你可以使用 ajaxComplete() 来延迟applyCurrentUserSettings 的触发，直到查询完成。

【讨论】：

【解决方案3】：

构建您的函数，以便它们正确返回 promise 对象，然后使用 .then 方法将多个一个接一个地链接起来，或者使用 .when 方法发送 x 个它们，然后在所有这些都完成时执行某些操作.

function populateTypes () {
    //your code
    return $.ajax(...);
}

以下内容一次发送 1 个：

function init () {
    populateTypes().then(populateGroups)
        .then(populateStatuses)
        .then(applyCurrentUserSettings)
        .done(function(){
            console.log("all done");
        });
}

以下内容一次发送除最后一个之外的所有内容，并且在前三个完成后发送最后一个：

function init () {
    $.when(populateTypes(), populateGroups(), populateStatuses())
        .then(applyCurrentUserSettings)
        .done(function(){
            console.log("all done");
        });
}

【讨论】：