Dojo Tutorials：Getting Started with Deferreds源代码和例子执行汇总

最新推荐文章于 2022-05-31 17:58:41 发布
最新推荐文章于 2022-05-31 17:58:41 发布
阅读量438 收藏
点赞数
分类专栏： HTML Dojo Javascript 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superfreak/article/details/121465153
版权
Dojo 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
Javascript
19 篇文章 0 订阅
订阅专栏
HTML
8 篇文章 0 订阅
订阅专栏
本文通过三个示例详细介绍了Dojo框架中 Deferred 对象的使用，包括发起HTTP请求获取JSON数据并处理响应，简化代码实现，以及 Deferred 的链式调用。示例展示了如何处理成功和失败的情况，以及如何对数据进行转换和呈现。通过这些例子，读者可以深入理解Dojo中异步操作的管理方式。
摘要由CSDN通过智能技术生成

例子一

对一个json文件发起请求，得到结果后返回结果。解析失败返回错误。


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

		<link rel="stylesheet" href="style.css" media="screen">
	</head>
	<body>
		<h1>Demo: dojo/Deferred</h1>

		<ul id="userlist"></ul>

		<!-- load dojo and provide config via data attribute -->
		<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>

json文件的内容如下：

[
	{ "id": 1, "username": "Tom", "name": "Cage" },
	{ "id": 2, "username": "Jack", "name": "Smith" },
	{ "id": 3, "username": "Kenan", "name": "Brown" }
]

成功后的结果：

 

失败后的结果（如果访问不到这个json文件的话）：

 例子二

和例子一很像，就是代码写法上有区别，更简洁了。代码如下：


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

		<link rel="stylesheet" href="style.css" media="screen">
	</head>
	<body>
		<h1>Demo: dojo/Deferred with dojo/request</h1>

		<ul id="userlist"></ul>

		<!-- load dojo and provide config via data attribute -->
		<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>

执行结果：略。

原来声明一个defer 代码是：

                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);
				});

现在是：

                    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);
					});

写法更简单明了。

例子三：Chaining 链式调用

json文件依旧是：

[
	[ 1, "Tom", "Cage" ],
	[ 2, "Jack", "Smith" ],
	[ 3, "Kenan", "Brown" ]
]

源代码文件是（console.log 语句是本人添加）：


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

		<link rel="stylesheet" href="style.css" media="screen">
	</head>
	<body>
		<h1>Demo: Chaining Deferreds</h1>
		<h2>Result from chaining from original deferred</h2>	
		<ul id="userlist1"></ul>
		<h2>Result from chaining from original.then()</h2>
		<ul id="userlist2"></ul>
		<h2>Result from chaining from original deferred after previous calls</h2>
		<ul id="userlist3"></ul>
		<!-- load dojo and provide config via data attribute -->
		<script src="dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
		<script>
			require(["dojo/request", "dojo/_base/array", "dojo/json", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"], function(request, arrayUtil, JSON, domConstruct, dom) {
				var original = request.get("users-mangled.json", {
					handleAs: "json"
				});	
				
				var result = original.then(function(res){
					var userlist = dom.byId("userlist1");
					console.log("以下代码用一维数组下标的方式，打印出res值");
					console.log(res[0]);
					console.log(res[1]);
					console.log(res[2]);	
					console.log("以上是用一维数组下标的方式，打印出res的值");

					//
					console.log("以下代码用二维数组下标的方式，打印出res值");
					console.log(res[0][0]);
					console.log(res[0][1]);
					console.log(res[0][2]);

					console.log(res[1][0]);
					console.log(res[1][1]);
					console.log(res[1][2]);

					console.log(res[2][0]);
					console.log(res[2][1]);
					console.log(res[2][2]);
					console.log("以上是用二维数组下标的方式，打印出res的值");

					return arrayUtil.map(res, function(user){
						domConstruct.create("li", {	innerHTML: JSON.stringify(user)}, userlist);
						console.log("以下代码用一维数组下标的方式，打印出user的值");
						console.log(user[0]);
						console.log(user[1]);
						console.log(user[2]);
						console.log("以上代码用一维数组下标的方式，打印出user的值");
						return {
							id: user[0],
							username: user[1],
							name: user[2]
						};
					});
				});
				    result.then(function(objs){
					var userlist = dom.byId("userlist2");
				console.log("以下代码用一维数组下标的方式，打印出objs的值");
				    console.log(objs[0]);
					console.log(objs[1]);
					console.log(objs[2]);	
				console.log("以上代码用一维数组下标的方式，打印出objs的值");
					//
					console.log("以下代码用二维数组下标的方式，打印出objs的值");
					console.log(objs[0][0]);
					console.log(objs[0][1]);
					console.log(objs[0][2]);
					console.log("以上是用二维数组下标的方式，打印出objs的值");
					console.log("实际运行会发现上面的打印结果是：undefine，即objs[][]是未定义的");

					arrayUtil.forEach(objs, function(user){
						domConstruct.create("li", {
							innerHTML: JSON.stringify(user)
						}, userlist);
					});
				});

				original.then(function(res){
					var userlist = dom.byId("userlist3");
				console.log("以下代码用一维数组下标的方式，再次打印出res的值");
				    console.log(res[0]);
					console.log(res[1]);
					console.log(res[2]);	
				console.log("以上代码用一维数组下标的方式，再次打印出res的值");
					//
					console.log("以下代码用二维数组下标的方式，再次打印出res的值");
					console.log(res[0][0]);
					console.log(res[0][1]);
					console.log(res[0][2]);

					console.log(res[1][0]);
					console.log(res[1][1]);
					console.log(res[1][2]);

					console.log(res[2][0]);
					console.log(res[2][1]);
					console.log(res[2][2]);
					console.log("以上是用二维数组下标的方式，再次打印出res的值");
					//console.log("实际运行会发现上面的打印结果是：undefine，即objs[][]是未定义的");

					arrayUtil.forEach(res, function(user){
						domConstruct.create("li", {
							innerHTML: JSON.stringify(user)
						}, userlist);
					});
				});

			});

		</script>
	</body>
</html>

下面是对上面代码的一点点解析。

先来看看

                    var result = original.then(function(res){
					var userlist = dom.byId("userlist1");
					console.log(res[0]);
					console.log(res[1]);
					console.log(res[2]);					

					return arrayUtil.map(res, function(user){
					domConstruct.create("li", {	innerHTML: JSON.stringify(user)}, userlist);
						console.log(user[0]);
						console.log(user[1]);
						console.log(user[2]);
						return {
							id: user[0],
							username: user[1],
							name: user[2]
						};
					});
				});

首先控制台打出：console.log(res[0]);console.log(res[1]);console.log(res[2]);

实际运行结果是：

如果修改console.log语句，让他打印出这个二维数组的值，看看是否可行？

代码段：

          console.log("以下代码用二维数组下标的方式，打印出res值");
					console.log(res[0][0]);
					console.log(res[0][1]);
					console.log(res[0][2]);

					console.log(res[1][0]);
					console.log(res[1][1]);
					console.log(res[1][2]);

					console.log(res[2][0]);
					console.log(res[2][1]);
					console.log(res[2][2]);
		   console.log("以上是用二维数组下标的方式，打印出res的值");

对应的 结果为：

所以现在就很清楚了，这个res就是一个二维数组，接下来的代码是对res用了一个 arrayUtil.map(res, function(user){}，就是传入一个数组，即传入了res，对res数组的每个元素都调用了后面的函数，这个函数功能是：创建html 元素，赋予html 内容 ，然后返回的是最小粒度的数据user[0],user[1],user[2].同时前面还添加了id，username，name 字符串。

代码段：

return arrayUtil.map(res, function(user){
				domConstruct.create("li", {	innerHTML: JSON.stringify(user)}, userlist);
						console.log("以下代码用一维数组下标的方式，打印出user的值");
						console.log(user[0]);
						console.log(user[1]);
						console.log(user[2]);
						console.log("以上代码用一维数组下标的方式，打印出user的值");
						return {
							id: user[0],
							username: user[1],
							name: user[2]
						};
					});

结果：

 例子四：chaining的实际用法


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

		<link rel="stylesheet" href="style.css" media="screen">
	</head>
	<body>
		<h1>Demo: Chaining Deferreds</h1>

		<ul id="userlist"></ul>

		<!-- load dojo and provide config via data attribute -->
		<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) {

					function getUserList(){
						return request.get("users-mangled.json", {
							handleAs: "json"
						}).then(function(response){
							return arrayUtil.map(response, function(user){
								return {
									id: user[0],
									username: user[1],
									name: user[2]
								};
							});
						});
					}

				getUserList().then(function(users){
					var userlist = dom.byId("userlist");
					arrayUtil.forEach(users, function(user){
						domConstruct.create("li", {
							id: user.id,
							innerHTML: user.username + ": " + user.name
						}, userlist);
					});
				});

			});

		</script>
	</body>
</html>

执行结果

 

superfreak
关注
专栏目录
jquery Deferred 数组
luhuabin
08-12 421
$.when.apply($, arrayDeferred) .done(function () {     //source code to run when done     //... });
前端一面必会手写面试题指南
最新发布
helloworld1024fd的博客
11-09 387
一般来说，Promise.all 用来处理多个并发请求，也是为了页面数据构造的方便，将一个页面所用到的在不同接口的数据一起请求过来，不过，如果其中一个接口失败了，多个请求也就失败了，页面可能啥也出不来，这就看当前页面的耦合程度了。AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。防抖函数原理:规定在一个单位时间内，只能触发一次函数。
$.when().done().then()传递Deferreds数组
peterPan1993的博客
09-23 433
将值数组传递给任何函数，通常希望它们是单独的参数，请使用Function.prototype.apply因此，在这种情况下，您需要： $.when.apply($,my_array).then(___); 看见http://jsfiddle.net/YNGcm/21/ 在ES6中，可以使用...扩展算子相反： $.when(...my_array).then(___); ...
Arrray 中的map和filter 函数的使用
用心工作
09-08 1303
swift 中的Array 提供了两个很方便的函数 map 和 filter 使用  map 可以建立一个从A数组到B数组的一个映射，（map返回的是一个数组） 例如: 我们给数组的每个元素后添加一个test  var array = ["1","2","3"];           println( array.map(fx))  func fx(str:Stri
翻译 - 【Dojo Tutorials】Hello Dojo!
weixin_30909575的博客
09-16 88
原文：Hello Dojo 欢迎使用Dojo。在本教程中，你将学习如何载入Dojo并开始探索它的核心功能。还会学习到Dojo的基于AMD的模块架构，涵盖了如何通过载入第三方模块来为你的网站或应用增强功能，以及在遇到问题时如何寻求帮助。 开始 开始使用Dojo很简单，在网页中加入dojo.js的script标签即可，和载入其他js文件一样。Dojo在流行的CDN服务器上都有放置，作为开始，我们...
Configuring Dojo with dojoConfig
06-28 844
dojoConfig 对象 (之前是djConfig)允许你设置各种工具包的选项和默认的动作。在这个教程我们将探讨你怎么能把dojoConfig来在您的代码中使用。 介绍 dojoConfig 对象在网页或应用中是配置Dojo的主要机制，它由模块加载器加载,像其他的Dojo组件一样有全局选项。它可以进一步被用作一个配置点为自定义应用程序,如果需要的 话，它可以进一步被用作一个配置
dojo 1.10 学习日记-Hello Dojo！
zuichudejiyi的博客
10-21 479
源网页：http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html1. Getting Started新建temp.html，代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!
Hello Dojo
chuozi5114的博客
10-20 134
Hello Dojo! Welcome to Dojo! In this tutorial, you’ll learn how to load Dojo and begin exploring some of its core functionality. You’ll also lear...
开始使用DOJO（翻译）
weixin_30629653的博客
12-14 105
http://dojotoolkit.org/documentation/tutorials/1.10/start/index.html 我怎么开始学习DOJO？文档在哪？我如何获取支持和培训？我应该是用DOJO的哪个版本？为什么我必须使用Web服务？我该如何避免常见的错误？我该如何提交问题?我应该如何为dojo贡献自己的力量，加入开发者团队？这些问题和答案在本教程都会介绍。 资料 The ...
Getting StartED with Dojo .pdf
12-15
5. **测试框架**：为了确保代码质量和程序稳定性，Dojo内置了一套强大的测试框架，支持单元测试、功能测试等多种测试类型。 ### 学习Dojo的关键步骤 - **理解基础概念**：在开始编码之前，先熟悉Dojo的基本架构和...
dojo:Dojo活动中产生的代码
05-01
在Python North East产生的代码-Code Dojo 此存储库包含在Python North East聚会中产生的代码。 每个目录对应一个不同的聚会，然后子目录包含各个团队的代码。 按照时间顺序，我们有： 2015-10-14：开胃菜 2014-...
python-DOJO-:编码dojo python作业
03-10
"Python DOJO"可能是一个项目，它包含了各种Python编程的练习题目或者挑战，帮助用户通过实际操作来巩固和提高Python语言的理解与应用。 在这个名为"python-DOJO-"的压缩包中，我们只有一个文件"python-DOJO--main...
hd-shared:Dojo应用程序的共享代码和资源
05-13
这是Hacker Dojo应用程序的共享模块和资源的集合。 它应该作为所有Dojo应用程序存储库的子模块包含在内。 包括在新的Dojo应用回购中 建议将公共规范高清共享存储库指向Dojo应用程序项目目录根目录中的“共享”目录。...
JS 为某个元素添加事件处理函数的写法
只会写HelloWorld的专栏
10-13 995
写法一：推荐方法。用object.addEventListener("click", myScript) 具体写法如下： <!DOCTYPE html> <html> <body> <p>本例使用 addEventListener() 方法将 "click" 事件附加到 p 元素。</p> <p id="demo">点击我.</p> <script> document.getElementById("
ArcGIS API for JavaScript 版本的历史
只会写HelloWorld的专栏
05-31 465
Version4.22-December 2021 Version4.21-September 2021 Version4.20-June 2021 Version4.19-April 2021 Version4.18-December 2020 Version4.17-October 2020 Version4.16-July 2020 Version4.15-April 2020 Version4.14-December 2019 ...
Angular教程：英雄之旅-英雄编辑器-运行过程和结果
只会写HelloWorld的专栏
12-10 353
下载官方的例子，如果直接编译运行是起不来的，原因也不知道，就是报错，如下图 怎么办呢?可以这样做 1创建应用，起个和原来的例子不一样的名字， 2然后拷贝：这个例子中src目录下的内容到你创建的应用的src目录下， 3 然后进入dos命令行，然后运行：ng server --open 即可。 4浏览器中可以访问该应用。效果如下图： ...
arcgis api for js : 一个基本的图层选择功能的实现
只会写HelloWorld的专栏
09-29 338
代码如下，搞了一天，脑袋想的快，实现的慢。 <head> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="https://js.arcgis.com/4.19/"></script> </head> <html> <script> require([ "esri/Map", "esr
Dojo入门指南
"GETTING STARTED WITH DOJO" 会引导读者了解Dojo的基础知识，包括如何设置开发环境，引入Dojo库，以及理解Dojo的加载机制（如 dojo.require 和 dojo.provide）。 3. **模块化开发** Dojo采用了AMD（Asynchronous...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值