jQuery中,Deferred和Promise简短说明

Promise

在jQUery之前，一个典型的$.ajax()调用如下所示：

$.ajax({
    url: '/myServerScript',
    success: mySuccessFunction,
    error: myErrorFunction
});  

$.ajax()调用返回了一个jQuery的XMLHttpRequest对象。到目前为止没有什么新东西。

1.5版本之后，$.ajax()的返回对象实现了CommonJS的Promises/A接口。它包含了很多的内容。CommonJS标准定义了一系列通用的独立的接口。Promises/A+是其中的一个。它带来的好处不仅仅体现在jQuery中。例如，如果你编写Node.js代码，你也可能就经常需要用到这个接口。这是一件非常棒的事情。

使用Promises处理回调函数和前面的例子有所不同：

var promise = $.ajax({
    url: "/myServerScript"
});

promise.done(mySuccessFunction); 
promise.fail(myErrorFunction);   

你也可以在一个then()函数中将done()和fail()函数合并起来。我们可以将上边的代码重写为以下形式：

var promise = $.ajax({
    url: "/myServerScript"
});  

promise.then(mySuccessFunction,myErrorFunction);   

Deferred

那么Deferred和Promise之间有什么区别呢？正如你在前面看到的，一个promise就是一个由异步函数返回的对象。当你想要自己编写一个这样的函数时你需要使用一个deferred。

一个deferred对象能做的和一个promise对象差不多，但是它有两个函数来触发done()和fail()函数。

一个deferred对象拥有一个resolve()函数来处理一个成功的结果并执行与done()相关的函数。reject()函数则用来处理失败的结果并执行与fail()相关的函数。

你可以给resolve()和reject()函数都提供参数，然后它们都将传递给与done()和fail()相关的回调函数。

promise对象没有resolve()和reject()函数。这是因为你将promise放到了其他的脚本中并且你也不想promise去resolve或者reject一个promise。

下面是一个关于deferred的简单例子。html仅仅是一个简单的拥有id属性为”result”的空div。

$('#result').html('waiting...');

var promise = wait();
promise.done(result);

function result() {
  $('#result').html('done');
}

function wait() {
  var deferred = $.Deferred();

  setTimeout(function() {
    deferred.resolve();
  }, 2000);

  return deferred.promise();
}   

其中，wait()函数返回了一个promise。它将在2s之后被解析。除了setTimeout之外，异步函数中所有的东西都能这样使用，比如动画，Web worker等等。wait()函数中的代码应该很清晰，我们使用了deferred对象，但是我们返回了一个限制的promise对象。

 

 

参考：http://www.html-js.com/article/Study-JavaScript-jQuery-Deferred-and-promise-every-day