使用Dojo的 defer（延迟) 方法的基本知识

作者: Bryan Forbes

译者: feijia (tiimfei@gmail.com)

原文连接: http://dojotoolkit.org/documentation/tutorials/1.6/deferreds/

适用dojo 版本: 1.6 

难度: 中等

 

在本教程中， 你将学到使用Dojo的 defer（延迟) 方法的基本知识。 

使用延迟方法，可以优雅轻松的处理在JS编程中常见的异步调用。我们还将解释如何使用DeferredList，它能够一次处理多个延迟的异步调用。 

 

入门

 

初听起来， “延迟" (Deferred) 这个名字颇为神秘。但它其实是一个Dojo提供给我们用来处理异步调用(例如Ajax)的强大工具. 简单来说，一个Deferred对象它会等待一段时间再去执行指定的调用，直到某个特定的事件发生或者前一个动作完成。Ajax就是一种常见的例子： 发出一个Ajax请求之后，我们需要等待服务器把响应返回之后才会调用处理函数。所以Deferred对象提供给我们的就是这种将某个动作延迟并等待某个事件发生的能力。在本教程中，我们将会结合Ajax教程的内容一起来解读如何使用Deferred对象更好的管理异步的JS程序。 

 

dojo.Deferred

 

延迟的概念并非Dojo专有,(译者：Jquery 等其他JS框架也有类似的对象和实现，  CommonJS 组织还为此定义了一套标准 ), 从0.3 版本开始Dojo就实现了dojo.Deferred对象。 

Deferred对象有三个状态，初始化时是"unresolve” 状态，当它所等待的事件发生时, 进入"resolve" 状态， 第三种状态是出错状态，即该事件没有按照预期的发展，例如服务器端返回了错误消息，也称reject 状态. 

 

创建Deferred对象后，我们可以通过调用该对象的then方法注册一个回调函数，表示当这个Deferred对象等待的某个事件发生时(resolve)，就调用该回调函数。then 方法还接受第二个参数，可以制定当事件失败或出错时（reject）时调用的出错回调函数 . 

 

让我们来看一个例子:

 

 

1. var def = new dojo.Deferred(),  
2.     userlist = dojo.byId("userlist");  
3.    
4. def.then(function(res){  
5.     // This will be called when the deferred  
6.     // is resolved  
7.     dojo.forEach(res, function(user){  
8.         dojo.create("li", {  
9.             id: user.id,  
10.             innerHTML: user.username + ": " + user.name  
11.         }, userlist);  
12.     });  
13. },function(err){  
14.     // This will be called when the deferred  
15.     // is rejected  
16.     dojo.create("li", {  
17.         innerHTML: "Error: " + err  
18.     }, userlist);  
19. });  
20.    
21. dojo.xhrGet({  
22.     url: "users.json",  
23.     handleAs: "json",  
24.     load: function(res){  
25.         // Resolve when content is received  
26.         def.resolve(res);  
27.     },  
28.     error: function(err){  
29.         // Reject on error  
30.         def.reject(err);  
31.     }  
32. });  

 

 

查看示例

 

在上面的示例中，我们创建了一个dojo.Deferred 对象并在上面分别注册了一个成功回调函数和出错回调函数。我们还调用了dojo.xhrGet 一个异步Ajax调用，去服务器端获取"user.json"。 如果这个ajax调用成功了，我们在xhr对象的load属性所设的回调函数中会将dojo.Deferred对象置为resolve状态 ，这时我们在该Deferred对象上注册的回调函数将会被调用;如果ajax调用失败，则Deferred上注册的错误回调函数将会被调用。 

 

 

上面的例子，你可能会觉得是多此一举, 为什么不直接在xhrGet里直接分别设定成功和失败的回调函数呢? 是的，你的确可以这么做，但是通过引入Deffered对象，我们把负责处理服务器端返回数据的逻辑（回调函数）和发送Ajax请求的逻辑进行了解藕。

 

实际上，为了方便开发者使用Deffered对象，Dojo的Ajax构造函数方法会直接返回给你一个Deferred对象，因此上面的代码可以简化不少:

 

 

1. var def = dojo.xhrGet({  
2.     url: "users.json",  
3.     handleAs: "json"  
4. });  
5.    
6. def.then(function(res){  
7.     var userlist = dojo.byId("userlist");  
8.    
9.     dojo.forEach(res, function(user){  
10.         dojo.create("li", {  
11.             id: user.id,  
12.             innerHTML: user.username + ": " + user.name  
13.         }, userlist);  
14.     });  
15. },function(err){  
16.     // This shouldn't occur, but it's defined just in case  
17.     alert("An error occurred: " + err);  
18. });  

 

 

查看示例

 

在这个例子中我们不再需要设置dojo.xhrGet的 load属性了，可以直接在xhrGet返回的Deferred对象上通过then来注册回调函数. 代码逻辑更加直观简洁. 

 

在回调函数中，我们遍历了从服务器端返回的用户列表，并且为每个用户创建了一个HTML列表 。 从功能上看，和前一个例子完全一样，但是在这个例子中，我们得以把处理服务器端数据的逻辑和发送Ajax请求的逻辑分开了。 所以Deferred对象的一个重要功能就是对我们的程序逻辑进行解藕。 (decoupling)

 

链式调用

 

dojo.Deferred是个挺容易理解的概念，但是它还有一些很强大的功能值得我们继续探索. 其中之一就是链式调用(Chaining)：每个then方法的返回值都仍然是一个Defered对象。 我们来看一个例子：

 

假设前面的例子里服务器端返回的不是JSON格式的用户对象，而是每个用户的信息的原始值。 值当然不如对象方便使用，所以我们希望注册一个回调函数来把这些原始数值转换为用户对象。

 

1. var original = dojo.xhrGet({  
2.              url: "users-mangled.json",  
3.              handleAs: "json"  
4.          });  
5.            
6.          var result = original.then(function(res){  
7.              var userlist = dojo.byId("userlist1");  
8.                
9.              return dojo.map(res, function(user){  
10.                  dojo.create("li", {  
11.                      innerHTML: dojo.toJson(user)  
12.                  }, userlist);  
13.                    
14.                  return {  
15.                      id: user[0],  
16.                      username: user[1],  
17.                      name: user[2]  
18.                  };  
19.              });  
20.          });  
21.            
22.          // 由original的then方法返回的result对象也有一个`then` 方法来接受回调函数,和original对象一样。  
23.          // 但是要注意的是传给result.then中注册的回调函数的值，不是Ajax调用获取的数据， 而是original的回调函数的返回值。   
24.          // 也就是已经经过格式转换的用户对象map  
25.          result.then(function(objs){  
26.              var userlist = dojo.byId("userlist2");  
27.                
28.              dojo.forEach(objs, function(user){  
29.                  dojo.create("li", {  
30.                      innerHTML: dojo.toJson(user)  
31.                  }, userlist);  
32.              });  
33.          });  
34.            

 

注意: 严格来说then方法的返回值并不是一个Deferred对象，它有个特定的名字"promise", 即承诺，实现了一个特定的API. 你可以进一步阅读关于prommise的教程 来深入学习, 不过在这里，我们可以暂时理解为 一个promise对象提供了和Deferred对象完全相同的then方法。 因此Deferred对象和Promise对象的then方法可以进行连续的链式调用。这样做的好处是什么呢？链式调用时，原始的Defered对象不会被修改，而且服务器端的返回的数据也没有被修改，你可以继续在original的defered对象上注册其他的回调函数来对原始数据进行进一步操作，在前面的例子基础上，你可以注册一个新的回调到original上，例如：

 

1. original.then(function(res){  
2.     var userlist = dojo.byId("userlist3");  
3.    
4.     dojo.forEach(res, function(user){  
5.         dojo.create("li", {  
6.             innerHTML: dojo.toJson(user)  
7.         }, userlist);  
8.     });  
9. });