javascript - 他们怎么能在这里调用 def.then 呢？

Question

我正在阅读有关 Promise 的内容，发现 this fiddle由 this post 的作者创建

代码在这里:

var def, getData, updateUI, resolvePromise;

// The Promise and handler
def = new $.Deferred();

updateUI = function (data) {
    $('p').html('I got the data!');
    $('div').html(data);
};
getData = $.ajax({
          url: '/echo/html/', 
          data: {
              html: 'testhtml', 
              delay: 3
          }, 
          type: 'post'
    })
    .done(function(resp) {
        return resp;
    })
    .fail(function (error) {
        throw new Error("Error getting the data");
    });


// Event Handler
resolvePromise = function (ev) {
    ev.preventDefault();
    def.resolve(ev.type, this);
    return def.promise();
};

// Bind the Event
$(document).on('click', 'button', resolvePromise);

def.then(function() {
    return getData;   
})
.then(function(data) {
    updateUI(data);
})
.done(function(promiseValue, el) {
    console.log('The promise was resolved by: ', promiseValue, ' on ', el);
});


// Console output: The promise was resolved by: click on <button> </button>

从本系列的第一部分中我确实了解到，deferred 有一个 promise，可以使用 promise 方法 对其进行公开.

Promise 有 then 方法，它返回一个用于链接的promise。

在这里，他们在 resolvePromise 中解析了 deferred 上的 Promise，然后执行了 deferred 上的 then 方法，我认为这不是一个 Promise。我在这里缺少什么？

Answer 1

jQuery 中的延迟对象也是thenable，您可以使用它们代替 Promise。不过，这样做并不常见。

var d = $.Deferred().resolve();
d.then(function(){
   console.log("HI"); // this will run.
});

原始的 $.ajax 具有 .done 和 .fail 在这种情况下是没有意义的，尤其 .done 其返回值被忽略并且没有影响。

老实说，我认为代码可以很容易地改进为类似的东西:

var getData = $.post('/echo/html/', { html: 'testhtml', delay: 3 }); 

var d = $.Deferred();
$(document).on('click', 'button', function(ev){
    d.resolve();
    return false;
});
$.when(d, getData).then(function(_, data){
    $('p').html('I got the data!');
    $('div').html(data);
}); 

• 如果您只使用恒等函数(即返回相同的内容而不执行任何其他操作)，则 .then 没有任何意义。
• 仅返回相同的内容是没有意义的。
• 一般来说，我建议不要 promise 处理事件，除非这些事件严格来说是一次性的。