jQuery-连续使用.done()得到与.then()/ .done()

时间:2018-08-20 11:18:51

标签: javascript jquery ajax

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

使用jquery 3.2.1和Bootstrap 3.3.7

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

  1. 用户单击ID为#notifierModal

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

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

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

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

  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产生调用链)

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

2 个答案:

答案 0 :(得分:2)

这个问题是重复的。 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')

答案 1 :(得分:0)

如果我正确理解了您要执行的操作,似乎您需要使用步骤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); 
            }
        });       
    }); 
});