Question

编辑-请查看底部的注释，了解为什么我不认为这是重复的问题

使用jquery 3.2.1和Bootstrap 3.3.7

我的部分应用程序具有以下流程：

用户单击ID为#notifierModal
这将产生第一个ajax请求，该请求将写入用户存储有关用户选择的首选项的数据库（每个选择都是步骤1的锚点-单击可打开/关闭该首选项）。此ajax请求的响应为JSON，格式如下：

{result: "success", message: "Notification preference has been updated"}

如果发生错误-就进行数据库更新而言-JSON为具有相似的结构，但会包含{result: "error"}和适当的消息。

发出了一个第二个ajax请求，以更新模式（#notifierModal）的内容。这是在步骤2中更新数据库中的首选项后有效地“刷新”模态中显示的数据。
在#notifierModal内更新步骤2的响应给出的结果（成功或错误消息）。

我的问题-我已经使用以下ajax实现了上述功能：

// Step 1
$('#notifierModal .modal-body').on('click', '.toggle-notifier a', function(e) {
    e.preventDefault();

    // Step 2
    $.ajax({
        url: $(this).attr('href'),
        method: 'get'
    }).then(function(response2) {

        // Step 3
        $.ajax({
            url: '/notifier-modal',
            method: 'get'
        }).then(function(response3) {

            $('#notifierModal .modal-body').html(response3);
        }).done(function() {

            // Step 4
            if (response2.result == 'error') {
                $('#notifierModal .modal-body .outcome').html(response2.message); 
            }
            if (response2.result == 'success') {
                $('#notifierModal .modal-body .outcome').html(response2.message); 
            }
        });       
    }); 
});

但是，如果我将.then()的两个实例都替换为.done()，则其工作方式完全相同。

在继续进行第二个ajax请求（步骤3）之前，我试图确保第一个ajax请求（步骤2）完成。我已阅读有关承诺和How do I chain three asynchronous calls using jQuery promises?

上的信息

我不明白为什么使用.done()会得到相同的结果，哪种方法是正确的？我很高兴可以对js进行其他改进，但是我的问题是关于单独使用.done()与.then()/.done()方法之间的区别吗？

我的应用程序正在“运行”-从某种意义上说，这两种方法都可以提供相同的结果-但我觉得自己犯了一个错误，因为我不了解这些方法之间的区别。请有人可以澄清一下吗？

不是重复项：有人建议这是jQuery deferreds and promises - .then() vs .done()的重复项。我不认为这是因为它说：

处理返回结果的方式也有所不同（称为链接，done不链接，而then产生调用链）

我已经将回调中的变量更新为response2和response3，以显示它们在js中处于哪个步骤。但是，无论我使用response2还是.done()，我都可以在步骤4中使用.then()（从步骤2开始）。那怎么可能？结果就是我想要的，但是我不明白它的工作方式，这令人担忧。

Answer 1

这个问题是重复的。 jquery-deferreds-and-promises-then-vs-done

简而言之：

wine_list = Wine.objects.filter(
    id__in=other_users_reviews_wine_ids
).annotate(
    mean=Avg('rating')
).order_by('-rating')

Answer 2

如果我正确理解了您要执行的操作，似乎您需要使用步骤2的响应来更新模式内容，但仅在加载步骤3中的内容之后才可以。如果这是问题所在，则：

$('#notifierModal .modal-body').on('click', '.toggle-notifier a', function(e) {
    e.preventDefault();

    // Step 2
    $.ajax({
        url: $(this).attr('href'),
        method: 'get'
    }).then(function(outcome) {

        // Step 3
        $.ajax({
            url: '/notifier-modal',
            method: 'get'
        }).then(function(response) {
            $('#notifierModal .modal-body').html(response);
            // Step 4
            if (outcome.result == 'error') {
                $('#notifierModal .modal-body .outcome').html(outcome.message); 
            }
            if (outcome.result == 'success') {
                $('#notifierModal .modal-body .outcome').html(outcome.message); 
            }
        });       
    }); 
});

jQuery-连续使用.done（）得到与.then（）/ .done（）

2 个答案: