开始
当你第一次听到 "Deferred" 这个专业术语, 它就像是一个神秘的对像。 实际上它是一个强大的工具,用于处理异步操作, 例如 ajax. 最简单的一种使用形式是, 一个 "Deferred" 用于一段时间之后在执行某一个行为。 本质上来说,你可以推迟一个动作的执行,直到它预先定义的动画已经完成。 比如Ajax中, 我们可以初始化一个XMLRequest请求服务器资源,但在服务器返回资源时,我们不会在做任何动作。 直到有返回值,在执行定义的动作。 本教程,我们将结何
Dojo Ajax 指南, 来学习如何使用Deferreds。
dojo/Deferred
dojo 的 Deffered 的实现是通过 dojo/Deferred模块(0.3版本以来就有了),在Dojo 1.8 对这个模块进行了重构。 我们在下面的代码里,实例化一个Deferred,可以通过then方法给它添加一个即将在未来发生的行为或者回调函数。 当Deferred被解析成功(ajax成功返回值) 后, 这些行为或回调函数就会被调用。 then可以接受第二个参数,当Deferred被拒绝(Ajax发生错误),调用的函数,这个错误回调被称为 errback. 通过代码, 我们可以有更好的理解.
require(["dojo/Deferred","dojo/request","dojo/_base/array","dojo/dom-construct","dojo/dom","dojo/domReady!"],function(Deferred,request,arrayUtil,domConstruct,dom) { // Create a deferred and get the user list var deferred = new Deferred(),userlist = dom.byId("userlist"); // Set up the callback and errback for the deferred deferred.then(function(res){ arrayUtil.forEach(res,function(user){ domConstruct.create("li",{ id: user.id,innerHTML: user.username + ": " + user.name },userlist); }); },function(err){ domConstruct.create("li",{ innerHTML: "Error: " + err },userlist); }); // Send an HTTP request request.get("users.json",{ handleAs: "json"}).then( function(response){ // Resolve when content is received deferred.resolve(response); },function(error){ // Reject on error deferred.reject(error); } ); });
在这个例子中, 我们创建了一个Deferred, 并且给它注册了成功resolve后的回调函数和一个errback. 我们调用request.get (异步操作). 来检索服务器上的 'user.json'. 如果检索成功, 它将调用 deferred.resolve,告诉deferred可以执行它注册的回调函数。如果检索失败,会触发一个reject 信号,deferred就会调用 then中第二个errback.
你可能会问自己,”我每次都要这样设置dojo/Deferred模块嘛?",其实不用,所有的Dojo Ajax方法都会返回 dojo/promise/Promise,它也是在成功返回是,被resolve,在发生错误时,被rejected.
require(["dojo/request",function(request,dom) { var deferred = request.get("users.json",{ handleAs: "json" }); deferred.then(function(res){ var userlist = dom.byId("userlist"); arrayUtil.forEach(res,function(err){ // This shouldn't occur,but it's defined just in case alert("An error occurred: " + err); }); });
我们通过then方法注册一个回调, 如果Ajax 请求成功, Deferred 会被resolved , 并且第一个参数会被调用,如果ajax调用失败, Deferred会被rejected,并且有一个error会被传递给errback.
我们来说一下, 为什么要使用Deferred, 之前使用过Jquery的同学都知道,jquery是只能在ajax初始化的时个, 设置一个success属性作为回调。 而使用Deferred的时候, 我们可以有更好的解耦, 不用在ajax中调置回调,dojo 可以将ajax作为一个Deferred返回,然后在任意位置决定是否要添加then方法,来注册回调函数。
Deferred的链式调用
虽然Deferred是的一个非常简单的概念, 但它还是包含了很多强大的功能。 比如, 每次调用then,实际上它会返回一个新的Deferred对像,
而不是callback的返回值。 这听起来很迷惑, 让我们看一个例子。
我们之前,json的数据为[{id: 1,username: 'xxx',name: 'aaa'},{id: 2,name: 'aaa'}],用对像表示一个用户的信息,现在我们替换成用数组表示一个用户的信息[ [1,'xxx','aaa'],[2,'aaa'] ]。 这种表示方法不是很常用, 所以我们需要注册一个回调函数, 将数组转化成一对用户对像。 依赖于第一个 then调用返回的结果(返回一个promise), 新返回的promise上注册的回调将使用的是user 对像,而不是数组了。 还是很难理解,直接看代码
require(["dojo/request","dojo/json",JSON,dom) { var original = request.get("users-mangled.json",{ handleAs: "json" }); var result = original.then(function(res){ var userlist = dom.byId("userlist1"); return arrayUtil.map(res,{ innerHTML: JSON.stringify(user) },userlist); return { id: user[0],username: user[1],name: user[2] }; }); }); // result 对像有一个`then`方法,它可以接受回调函数, // 这跟 original (ajax返回的对你)是一样的 -- 但是回调函数处理的数据 // 不在是Ajax的返回值, 而是第一次回调函数的返回值 result.then(function(objs){ var userlist = dom.byId("userlist2"); arrayUtil.forEach(objs,userlist); }); }); });
original.then(function(res){ var userlist = dom.byId("userlist3"); arrayUtil.forEach(res,function(user){ domConstruct.create("li",{ innerHTML: JSON.stringify(user) },userlist); }); });
查看Demo
require(["dojo/request",dom) { function getUserList(){ return request.get("users-mangled.json",{ handleAs: "json" }).then(function(response){ return arrayUtil.map(response,function(user){ return { id: user[0],name: user[2] }; }); }); } getUserList().then(function(users){ var userlist = dom.byId("userlist"); arrayUtil.forEach(users,userlist); }); }); });
查看Demo
现在通过getUserList就可以获得 user objects,而不是数组了
有时,你可能需要从多个源中并行检索数组, 并且在所有的请求完成后,可以获得通知。 或者串行的Deferred, 并且计算返回值。 你可以使用 dojo/DeferredList模块。 在1.8版本中,是通过dojo/promise/all 和 dojo/promise/first实现, 你可以学习
promises 指南