jquery - 连续使用 .done() 给出与 .then() / .done() 相同的结果

Question

编辑 - 请参阅底部的注释说明为什么我不认为这是一个重复的问题

使用 jquery 3.2.1 和 Bootstrap 3.3.7

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

1. 用户在模态窗口中单击 ID 为 #notifierModal 的锚点

2. 这使得 第一个 ajax 请求 写入数据库，存储用户做出的选择的首选项（每个选择都是第 1 步中的一个锚点 - 单击打开/关闭首选项）。此 ajax 请求的响应是 JSON，格式如下：

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

如果发生错误 - 在进行数据库更新方面 - JSON 是 结构相似，但会有{result: "error"} 和适当的消息。

1. 第二个 ajax 请求 用于更新模式 (#notifierModal) 的内容。这有效地“刷新”了从步骤 2 更新数据库中的首选项后模态中显示的数据。

2. 步骤 2 的响应给出的结果（成功或错误消息）在 #notifierModal 内部更新。

我的问题 - 我已经使用以下 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); 
            }
        });       
    }); 
});

但是，如果我用.done() 替换.then() 的两个实例，它的工作方式完全相同。

我正在尝试确保第一个 ajax 请求（步骤 2）在继续发出第二个 ajax 请求（步骤 3）之前完成。我已经阅读了关于 Promises 和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 中的哪个步骤。但是，无论我使用.done() 还是.then()，我都可以在第4 步中使用response2（来自第2 步）。这怎么可能？结果是我想要的，但我不明白它是如何工作的，这令人担忧。

Answer 1

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

简而言之：

promise.then( doneCallback, failCallback )
// was equivalent to
promise.done( doneCallback ).fail( failCallback )

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