在插件中使用 jquery 延迟承诺

Question

我编写了一个插件，它应该从 API 获取错误消息并将它们显示在元素的 HTML 中。我想将它作为一个承诺来实现，以便其他事件可以通过done 或always 回调链接到它。插件的简化版如下所示：

(function( $ ) {
     $.fn.flashAlerts = function() {
         var deferred = $.Deferred();

         var field = $(this);

         $.getJSON( "alerts", {})
         .done(function( data ) {
             // Display alerts
             field.html(data['message']);

             deferred.resolve();
         });
         return deferred.promise();
     };
 }( jQuery ));     

使用场景可能如下所示：

$("#myForm").submit(function(e) {
    e.preventDefault();

    var form = $(this);

    // Disable submit button
    form.disableSubmitButton();

    var serializedData = form.serialize();
    var url = form.attr('action');

    $.ajax({  
     type: "POST",  
     url: url,  
     data: serializedData       
    }).fail(function(jqXHR) {

       // Display errors on failure
       $('#alerts').flashAlerts().done(function() {
           // Re-enable submit button
           form.enableSubmitButton();
       });
    });
});

这个想法是强制执行以下操作序列：

1. 发布表单。在请求之前，禁用提交按钮。请求完成后，
2. 从alerts api 获取错误。一旦 那个 请求完成，就会显示错误消息。显示错误消息后，
3. 重新启用提交按钮。

这段代码似乎可以正常工作，但我不知道延期是否按正确的顺序工作（或者我只是对请求的时间感到幸运）。

那么，我这样做对吗？如何测试延期订单是否符合要求？

Answer 1

这段代码似乎可以正常工作，但我不知道延期是否按正确的顺序工作

是的，它们确实按预期工作。

那么，我这样做对吗？

不，您在 flashAlerts 方法中使用了 deferred antipattern。此外，您会忽略来自对/alerts 的 ajax 请求的错误，因此如果两个请求都失败，则不会重新启用该按钮。不确定这是否是您的意图，但我会使用 .always 而不是 .done 进行最后一次回调。

这是我要写的：

 $.fn.flashAlerts = function() {
     var field = $(this);
     return $.getJSON( "alerts", {})
     .then(function(data) {
         // Display alerts
         field.html(data['message']);
         return data;
     });
 };

如何测试延期订单是否符合要求？

没有太多要测试的。通过您的代码布局方式，完全不可能在$('#alerts').flashAlerts() 之前调用form.enableSubmitButton();，或者在$.ajax({ … }) 之前调用$.getJSON( "alerts", {})。当然，您必须相信它们在完成之前不会解决承诺的那些函数（这是您的代码工作所必需的），但是执行顺序是不可逾越的。