Promise学习记录 | The blog of wf

文章目录

前言
在网站开发中，会经常处理各种事件，如mouseclick/mouseover/click等等。在DOM 0事件模型，采取的事件监听方式是ele.onclick=handler，这会导致一个问题，如果想用hanlder2来监听click，则hanlder就会被覆盖，不会执行了，因为一次只能安排一个监听函数。但在DOM 2事件模型中，使用DOM方法中的addEventListener来添加事件监听就能解决这个问题，它支持你为一个事件添加多个处理程序。

Ajax的调用也经历了类似的过程。

在JQuery 1.5之前，Ajax仅支持一个回调函数，但在JQuery的1.5版本中，引入了 Deferred 对象，它允许注册多个回调函数，并且能传递任何同步或异步函数的执行状态–成功或失败。简单说， Deferred 对象就是jQuery的回调函数解决方案，它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。

什么是Promise
Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。回顾一下在JQuery 1.5之前，传统的Ajax操作写法：

$.ajax({
url: “/ServerResource.txt”,
success: successFunction,
error: errorFunction
});
$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。

现在，新的写法是这样的：

var promise = $.ajax({
url: “/ServerResource.txt”
});
promise.done(successFunction);
promise.fail(errorFunction);
promise.always(alwaysFunction);
在jQuery 1.6之前，always()相当于complete()，在done() 或 fail()执行完毕之后才执行，即无论Ajax的执行结果是什么，always()总会执行。

done()， fail()，和always()会返回同一个JQuery XMLHttpRequest(jqXHR)对象，所以可以进行链式调用：

$.ajax( “example.php” )
.done(function() { alert(“success”); })
.fail(function() { alert(“error”); })
.always(function() { alert(“complete”); });
deferred对象的一大好处，就是它允许你自由添加多个回调函数。

$.ajax(“test.html”)
　　.done(function(){ alert(“哈哈，成功了！”);} )
　　.fail(function(){ alert(“出错啦！”); } )
　　.done(function(){ alert(“第二个回调函数！”);} );
回调函数可以添加任意多个，它们按照添加顺序执行。如果在后续的代码中还需要利用改jqXHR对象，就必须用变量保存：

$.ajax({url: “/ServerResource.txt”})
.then([successFunction1, successFunction2, successFunction3],
[errorFunction1, errorFunction2]);
//same as
var jqxhr = $.ajax({
url: “/ServerResource.txt”
});
jqxhr.done(successFunction1);
jqxhr.done(successFunction2);
jqxhr.done(successFunction3);
jqxhr.fail(errorFunction1);
jqxhr.fail(errorFunction2);
1.8版本之后，then会返回一个新的Promise，它可以通过一个函数过滤掉Deferred对象的状态和值，用于取代不被推荐使用的 deferred.pipe() 方法。

var promise = $.ajax({
url: “/ServerResource.txt”
});
promise.then(successFunction, errorFunction);
//如果不想处理某个事件类型，可以传入Null
var promise = $.ajax({
url: “/ServerResource.txt”
});
promise.then(successFunction); //no handler for the fail() event
then()方法还能逐次调用多个方法，可以用于处理有着先后顺序或者依赖的多个Ajax请求：

var promise = $.ajax(“/myServerScript1”);
function getStuff() {
return $.ajax(“/myServerScript2”);
}
promise.then(getStuff).then(function(myServerScript2Data){
// Do something
});

为多个操作指定回调函数
上文提到过，Deferred对象允许你为多个事件指定一个回调函数，这是传统写法做不到的。请看下面的代码，它用到了一个新的方法 $.when()：

$.when($.ajax(“test1.html”), $.ajax(“test2.html”))
　　.done(function(){ alert(“哈哈，成功了！”); })
　　.fail(function(){ alert(“出错啦！”); });
　　
这段代码的意思是，先执行两个操作$.ajax(“test1.html”)和$.ajax(“test2.html”)，如果都成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。

$.when()的参数只能是deferred对象，如果不是，则done会立即执行：

对上述的wait进行改写：

var dtd = $.Deferred(); // 新建一个deferred对象
　　var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert(“执行完毕！”);
　　　　　　dtd.resolve(); // 改变deferred对象的执行状态
　　　　　　//dtd.reject(); 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　　　return dtd;
　　};
现在，wait()函数返回的是deferred对象，这就可以加上链式操作了。

//wait()函数运行完，就会自动运行done()方法指定的回调函数。
$.when(wait(dtd))
　　.done(function(){ alert(“哈哈，成功了！”); })
　　.fail(function(){ alert(“出错啦！”); });
在ajax操作中，deferred对象会根据返回结果，自动改变自身的执行状态；但是，在wait()函数中，这个执行状态必须由程序员手动指定。调用dtd.resolve()，将dtd对象的执行状态从”未完成”改为”已完成”，从而触发done()方法。调用dtd.reject()，将dtd对象的执行状态从”未完成”改为”已失败”，从而触发fail()方法。

但是这种写法是有问题的，因为dtd是一个全局对象，所以它的执行状态可以从外部改变。

为了避免这种情况，可以在内部建立Deferred对象：

var wait = function(dtd){
var dtd = $.Deferred(); // 在内部新建一个Deferred对象
　　　　var tasks = function(){
　　　　　　alert(“执行完毕！”);
　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　　　return dtd;
　　};
另外一个方式是利用 deferred.promise() 方法：

The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request. The Promise exposes only the Deferred methods needed to attach additional handlers or determine the state (then, done, fail, always, pipe, progress, state and promise), but not ones that change the state (resolve, reject, notify, resolveWith, rejectWith, and notifyWith).
也就是说，deferred.promise() 只是阻止其他代码来改变这个 deferred 对象的状态。可以理解成，通过 deferred.promise() 方法返回的 deferred promise 对象，是没有 resolve ,reject, progress , resolveWith, rejectWith , progressWith 这些可以改变状态的方法，你只能使用 done, then ,fail 等方法添加 handler 或者判断状态。

var dtd = $.Deferred(); //新建一个延迟对象
var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert(“执行完毕！”);
　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　　　return dtd.promise(); // 返回promise对象
　　};
下一篇会说说关于Promise的单元测试。

参考文章：
Making Promises With jQuery Deferred
jQuery的deferred对象详解
原文链接：淡忘~浅思 » JQuery的Promise详解(一):Promise基础