参考博客:https://blog.csdn.net/blog_szhao/article/details/50220181
https://dojotoolkit.org/documentation/tutorials/1.10/promises/
Deferred是一个绝妙又给力的东西,但是它其实是更棒的promis的实现,dojo/Deferred 模块是promise在Dojo的主要实现方式
一个promise是代表一个操作完成的最终返回值的对象。promise有以下特点:
- 可以为三个状态中的一个:unfulfilled、resolved、 rejected
- 可以从unfulfilled转变到resolved或者rejected
- 实现了一个 then 方法来针对状态改变的通知注册回调
- 回调不能改变promise产生的值
- promise的 then 方法返回一个新的promise,在保持原promise的值不变的情况下提供链式操作
举个栗子:
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Demo: dojo/Deferred</title> 6 <link rel="stylesheet" href="style.css" media="screen"> 7 </head> 8 <body> 9 <h1>Demo: dojo/Deferred</h1> 10 <ul id="userlist"></ul> 11 <!-- load dojo and provide config via data attribute --> 12 <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script> 13 <script> 14 require(["dojo/Deferred", "dojo/request", "dojo/_base/array", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"], 15 function(Deferred, request, arrayUtil, domConstruct, dom) { 16 /*var deferred = new Deferred(), 17 userlist = dom.byId("userlist"); 18 19 deferred.then(function(res){ 20 arrayUtil.forEach(res, function(user){ 21 domConstruct.create("li", { 22 id: user.id, 23 innerHTML: user.username + ": " + user.name 24 }, userlist); 25 }); 26 },function(err){ 27 domConstruct.create("li", { 28 innerHTML: "Error: " + err 29 }, userlist); 30 }); 31 32 // Send an HTTP request 33 request.get("users.json", { 34 handleAs: "json"}).then( 35 function(response){ 36 // Resolve when content is received 37 deferred.resolve(response); 38 }, 39 function(error){ 40 // Reject on error 41 deferred.reject(error); 42 } 43 );*/ 44 45 //由于dojo/Deferred模块是Dojo的promise接口的主要实现,所以上面这个例子可以这样写: 46 var deferred = request.get("users.json", { 47 handleAs: "json" 48 }); 49 deferred.then(function(res){ 50 var userlist = dom.byId("userlist"); 51 arrayUtil.forEach(res, function(user){ 52 domConstruct.create("li", { 53 id: user.id, 54 innerHTML: user.username + ": " + user.name 55 }, userlist); 56 }); 57 },function(err){ 58 // This shouldn't occur, but it's defined just in case 59 alert("An error occurred: " + err); 60 }); 61 }); 62 </script> 63 </body> 64 </html>