以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题

Promises是一种令代码异步行为更加优雅的抽象，它很有可能是JavaScript的下一个编程范式，一个Promise即表示任务结果，无论该任务是否完成。本文以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题，需要的朋友参考下

Promises是一种令代码异步行为更加优雅的抽象，它很有可能是JavaScript的下一个编程范式，一个Promise即表示任务结果，无论该任务是否完成。

在一些现代浏览器中已经提供了原生的Promise对象，其遵循Promise/A+标准。在jQuery1.5+，提供了$.Deferred(其可以被转化为promise对象)。很多知名的框架中，也提供了promise对象。promise对象在javascript中已经是一种很重要的模式，它在解决异步问题时表现出的优雅，正是javascript所需要的。以下以jQuery中的$.Deferred对象为例，来看一下promise对象是如何处理异步问题。关于$.Deferred对象，可以到jQuery官网查看，这里就不赘述了。

一、封装异步操作

首先，我们以加载图片为例，看以下代码：

1. //加载图片函数 
2. var loadImg = function(url){ 
3. 　　var img = new Image() , deferred = $.Deferred() ; 
4. img.src = url ; 
5. img.onload = function(){ 
6. //成功则触发deferred.resolve 
7. 　　　　deferred.resolve( this ) ; 
8. } ; 
9. img.onerror = function(e){ 
10. 　　　 //失败则触发deferred.reject 
11. deferred.reject( e ); 
12. } ; 
13. 　　//返回promise对象 
14. return deferred.promise() ; 
15. } ; 
16. //请求图片 
17. var request = loadImg('http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6') ; 
18. //请求成功 
19. request.done(function(img){ 
20. 　　//code 
21. }) ; 
22. //可以注册多个回调，当请求成功时，会按注册的顺序执行，fail和always也有此性质 
23. request.done(function(img){ 
24. 　　// code 
25. }); 
26. //请求失败 
27. request.fail(function(){ 
28. 　　// code 
29. }) ; 
30. //请求完毕 
31. request.always(function(){ 
32. 　　//code 
33. }); 

以上的代码，我封装了图片加载的操作，将他们委托给$.Deferred，最后生成一个promise返回。使用这样的方式，相比用对外暴露回调的方式，显得更干净、更清晰。这么做的另一个更重要的原因是，promise的连接。

二、promise的连接

我们还是以上面图片加载的代码为例，来看一下如何做promise的连接，看以下代码：

1. var request = loadImg('http://b1.hucdn.com/upload/item/1411/13/89613257775992_800x800.jpg') ; 
2. request.done(function(img){ 
3. 　　//code 
4. }) ; 
5. //request连接别的promise之后返回的promise 
6. var request3 = request.then(function(img){ 
7. 　　//request执行成功时 连接request1 
8. 　　var request1 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ; 
9. 　　return request1 ; 
10. },function(e){ 
11. 　　//request执行失败时 连接request2 
12. 　　var request2 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ; 
13. 　　return request2 ; 
14. }); 
15. //request执行并且request1或request2成功执行时 
16. request3.done(function(done){ 
17. 　　//code 
18. }) ; 

promise对象提供了then的方法，它接受两个回调：onResolve和onReject，在回调中返回promise，就可以完成promise之间的连接。通过这种方式，可以使异步操作串行的执行。

同时，jQuery还提供了另外一种连接方式，看代码：

1. var request = loadImg('http://b1.hucdn.com/upload/item/1412/23/48188827139381_800x800.jpg') ; 
2. var request1 = loadImg('http://b1.hucdn.com/upload/item/1412/06/50258594673502_800x800.jpg') ; 
3. //通过$.when连接promise 
4. var request2 = $.when(request,request1) ; 
5. request2.done(function(img,img){ 
6. 　　//code 
7. }) ; 

jQuery中提供了$.when这个函数，它可以接受n个promise对象为参数，它是将promise的执行结果连接在一起。使用这种方式，多个异步操作可以并行执行。

三、The End

这里的代码是以加载图片为例，同样的做法可以应用到其他的异步操作中去。比如jQuery中的$.ajax、$.fn.animate，调用它们返回的就是promise。在node端，也可以把一些异步操作(读数据库、读文件等)封装成promise。继而对多个promise实现合并的操作，使其串行或者并行执行。

附：deferred对象

deferred除了用于转化promise对象外，本身也是个很有用的对象。它除了提供像promise对象的那些方法和属性外，还有notify函数和progress函数，这两个函数在实现进度条和瀑布流的时候，有很大的用处。

在实现进度条时，resolve和done函数可以用于定义进度条读取到100%时的触发时机和触发逻辑，notify和progress函数可以用于定义进度条在读取中的触发时机和触发逻辑。reject和fail函数可以用于定义进度读取失败时的触发时机和触发逻辑。

在实现瀑布流时，resolve和done函数可以用于定义当数据已经全部加载到页面的触发时机和触发逻辑，notify和progress函数可以用于定义瀑布流读取下一页的触发时机和触发逻辑。