jQuery-连续使用.done()得到与.then()/.done()相同的结果 [英] jquery - using .done() successively is giving the same results as .then() / .done()

问题描述

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

使用jquery 3.2.1和Bootstrap 3.3.7

Using jquery 3.2.1 and Bootstrap 3.3.7

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

Part of my application has the following flow:

1. 用户单击ID为#notifierModal

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

This makes the first ajax request which writes to a database storing preferences on choices a user makes (each choice is an anchor from step 1 - clicking toggles the preference on/off). The response from this ajax request is JSON which is in the following format:

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

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

If there was an error - in terms of making a database update - the JSON is of a similar structure but would have {result: "error"} and an appropriate message.

1. 发出了一个第二个ajax请求，以更新模式(#notifierModal)的内容.这是在步骤2中更新数据库中的首选项后有效地刷新"模态中显示的数据.

1. A second ajax request is made to update the contents of the modal (#notifierModal). This is effectively to "refresh" the data shown in the modal following updating preferences in a database from step 2.

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

The result (success or error message) given by the response from step 2 is updated inside #notifierModal.

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

My question - I have implemented the above with the following 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()，则其工作原理完全相同.

However, if I replace both instances of .then() with .done() it works in exactly the same way.

在继续进行第二个ajax请求(步骤3)之前，我试图确保第一个ajax请求(步骤2)完成.我已经阅读了有关Promises的信息，以及有关上的信息的信息使用jQuery Promise链接三个异步调用?

I am trying to ensure that the first ajax request (step 2) completes before continuing to making the second ajax request (step 3). I have read about Promises and the information on How do I chain three asynchronous calls using jQuery promises?

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

I don't understand why using .done() gives the same outcome and which is the correct approach? I appreciate there may be other improvements I can make to the js but my question here is concerning the difference between using .done() on it's own versus a .then()/.done() approach?

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

My application is "working" - in the sense it gives the same results from both ways - but I feel like I'm making a mistake because I don't understand the difference between these approaches. Please can someone clarify this?

不是重复项:有人建议这是

Not a duplicate: Someone suggested this is a duplicate of jQuery deferreds and promises - .then() vs .done(). I don't think it is because it says:

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

There is also difference in way that return results are processed (its called chaining, done doesn't chain while then produces call chains)

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

I've updated the variables in callbacks to response2 and response3 to show which step they are in within the js. However, I can use response2 (from step 2) inside step 4 irrespective of whether I use .done() or .then(). How is that possible? The outcome is what I want, but I don't understand how it's working, which is concerning.

推荐答案

此问题重复. jquery-deferreds-and-promises-then-vs-done

简而言之:

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

这篇关于jQuery-连续使用.done()得到与.then()/.done()相同的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！