Dojo:Fundamental:Getting Started with Deferreds

最新推荐文章于 2022-05-31 17:58:41 发布

原创最新推荐文章于 2022-05-31 17:58:41 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

Dojo 同时被 2 个专栏收录

23 篇文章

订阅专栏

Javascript

19 篇文章

订阅专栏

博客介绍了官方示例中需访问的json文件内容，给出两个dojo/Deferred使用示例。例子1繁琐地创建和使用deferred，例子2是一般实际用法。通过对比可知，例子2效果相同但更优。

官方的例子需要访问一个json文件，内容如下：

[
   { "id": 1, "username": "user1", "name": "User One" },
   { "id": 2, "username": "user2", "name": "User Two" },
   { "id": 3, "username": "user3", "name": "User Three" }
]

放在服务器上，和html文件放在一起就可以了。

例子1是比较繁琐的创建和使用deferred：

<!DOCTYPE HTML>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <title>Demo: dojo/Deferred</title>

<script src="dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
       <script>
           require(["dojo/Deferred", "dojo/request", "dojo/_base/array", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"],
           function(Deferred, request, arrayUtil, domConstruct, dom) {
               var deferred = new Deferred(),
                   userlist = dom.byId("userlist");

               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);
                   }
               );
           });
       </script>
   </body>
</html>

例子2是：一般的用法，实际中的用法：

<!DOCTYPE HTML>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <title>Demo: dojo/Deferred with dojo/request</title>

<script src="dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
       <script>
           require(["dojo/request", "dojo/_base/array", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"],
               function(request, arrayUtil, domConstruct, dom) {
                   var deferred = request.get("users.json", {
                       handleAs: "json"
                   });
                   deferred.then(function(res){
                       var userlist = dom.byId("userlist");

                       arrayUtil.forEach(res, function(user){
                           domConstruct.create("li", {
                               id: user.id,
                               innerHTML: user.username + ": " + user.name
                           }, userlist);
                       });
                   },function(err){
                       // This shouldn't occur, but it's defined just in case
                       alert("An error occurred: " + err);
                   });
           });
       </script>
   </body>
</html>

明显例子2更好一下，效果一样一样的。