当前位置：网站首页>Dojo tutorials:getting started with deferrals source code and example execution summary
Dojo tutorials:getting started with deferrals source code and example execution summary
2022-07-03 12:51:00 【superfreak】
Example a
To a json File initiation request , Return the result after getting the result . Parsing failed and returned an error .
<!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 The contents of the document are as follows ：
[
{ "id": 1, "username": "Tom", "name": "Cage" },
{ "id": 2, "username": "Jack", "name": "Smith" },
{ "id": 3, "username": "Kenan", "name": "Brown" }
]The result of success ：
Results after failure （ If you can't access this json Word of the file ）：
Example 2
Similar to example 1 , There are differences in code writing , More concise . The code is as follows ：
<!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>
Execution results ： A little .
The original statement is defer The code is ：
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);
});Now it is ：
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);
});The writing is simpler and clearer .
Example 3 ：Chaining call chaining
json The file is still ：
[
[ 1, "Tom", "Cage" ],
[ 2, "Jack", "Smith" ],
[ 3, "Kenan", "Brown" ]
]The source code file is （console.log The statement is added by myself ）：
<!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(" The following code uses one-dimensional array subscript , Print out res value ");
console.log(res[0]);
console.log(res[1]);
console.log(res[2]);
console.log(" The above is the way of subscribing to a one-dimensional array , Print out res Value ");
//
console.log(" The following code uses a two-dimensional array subscript , Print out res value ");
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(" The above is a two-dimensional array subscript , Print out res Value ");
return arrayUtil.map(res, function(user){
domConstruct.create("li", { innerHTML: JSON.stringify(user)}, userlist);
console.log(" The following code uses one-dimensional array subscript , Print out user Value ");
console.log(user[0]);
console.log(user[1]);
console.log(user[2]);
console.log(" The above code uses one-dimensional array subscript , Print out user Value ");
return {
id: user[0],
username: user[1],
name: user[2]
};
});
});
result.then(function(objs){
var userlist = dom.byId("userlist2");
console.log(" The following code uses one-dimensional array subscript , Print out objs Value ");
console.log(objs[0]);
console.log(objs[1]);
console.log(objs[2]);
console.log(" The above code uses one-dimensional array subscript , Print out objs Value ");
//
console.log(" The following code uses a two-dimensional array subscript , Print out objs Value ");
console.log(objs[0][0]);
console.log(objs[0][1]);
console.log(objs[0][2]);
console.log(" The above is a two-dimensional array subscript , Print out objs Value ");
console.log(" The actual operation will find that the above print result is ：undefine, namely objs[][] It's undefined ");
arrayUtil.forEach(objs, function(user){
domConstruct.create("li", {
innerHTML: JSON.stringify(user)
}, userlist);
});
});
original.then(function(res){
var userlist = dom.byId("userlist3");
console.log(" The following code uses one-dimensional array subscript , Print it out again res Value ");
console.log(res[0]);
console.log(res[1]);
console.log(res[2]);
console.log(" The above code uses one-dimensional array subscript , Print it out again res Value ");
//
console.log(" The following code uses a two-dimensional array subscript , Print it out again res Value ");
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(" The above is a two-dimensional array subscript , Print it out again res Value ");
//console.log(" The actual operation will find that the above print result is ：undefine, namely objs[][] It's undefined ");
arrayUtil.forEach(res, function(user){
domConstruct.create("li", {
innerHTML: JSON.stringify(user)
}, userlist);
});
});
});
</script>
</body>
</html>
Here is a little analysis of the above code .
First look at it.
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]
};
});
});First, the console hits ：console.log(res[0]);console.log(res[1]);console.log(res[2]);
The actual running result is ：
If modified console.log sentence , Let him print out the value of this two-dimensional array , See if it works ？
Code segment ：
console.log(" The following code uses a two-dimensional array subscript , Print out res value ");
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(" The above is a two-dimensional array subscript , Print out res Value ");Corresponding The result is ：
So it's clear now , This res It's a two-dimensional array , The next code is right res One was used arrayUtil.map(res, function(user){}, Is to pass in an array , Is passed in res, Yes res Each element of the array calls the following function , The function of this function is ： establish html Elements , give html Content , Then the smallest granularity data is returned user[0],user[1],user[2]. At the same time, we also added id,username,name character string .
Code segment ：
return arrayUtil.map(res, function(user){
domConstruct.create("li", { innerHTML: JSON.stringify(user)}, userlist);
console.log(" The following code uses one-dimensional array subscript , Print out user Value ");
console.log(user[0]);
console.log(user[1]);
console.log(user[2]);
console.log(" The above code uses one-dimensional array subscript , Print out user Value ");
return {
id: user[0],
username: user[1],
name: user[2]
};
});result ：
Example four ：chaining The actual use of
<!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>
Execution results
边栏推荐
- 【ArcGIS自定义脚本工具】矢量文件生成扩大矩形面要素
- 【ManageEngine】IP地址扫描的作用
- [judgment question] [short answer question] [Database Principle]
- 剑指Offer05. 替换空格
- Brief introduction to mvcc
- 01 three solutions to knapsack problem (greedy dynamic programming branch gauge)
- 【习题六】【数据库原理】
- Bert running error: attributeerror: module'tensorflow contrib. tpu' has no attribute 'InputPipelineConfig'
- Apache Mina Development Manual
- 剑指Offer04. 二维数组中的查找【中等】
猜你喜欢
(latest version) WiFi distribution multi format + installation framework
![[problem exploration and solution of one or more filters or listeners failing to start]](/img/82/e7730d289c4c1c4800b520c58d975a.jpg)
[problem exploration and solution of one or more filters or listeners failing to start]
阿里大于发送短信(用户微服务--消息微服务)
Sword finger offer07 Rebuild binary tree
Brief introduction to mvcc
最新版盲盒商城thinkphp+uniapp
Seven second order ladrc-pll structure design of active disturbance rejection controller
Quick learning 1.8 front and rear interfaces
【综合题】【数据库原理】
Differences between initial, inherit, unset, revert and all
随机推荐
context. Getexternalfilesdir() is compared with the returned path
Xctf mobile--app1 problem solving
The latest version of blind box mall thinkphp+uniapp
Solve the problem of VI opening files with ^m at the end
elastic_ L01_ summary
Exploration of sqoop1.4.4 native incremental import feature
Oh my Zsh + TMUX installation
[ArcGIS user defined script tool] vector file generates expanded rectangular face elements
自抗扰控制器七－二阶 LADRC-PLL 结构设计
【数据挖掘复习题】
Write a simple nodejs script
Differences and connections between final and static
Project video based on Linu development
ORM use of node -serialize
[network counting] Chapter 3 data link layer (2) flow control and reliable transmission, stop waiting protocol, backward n frame protocol (GBN), selective retransmission protocol (SR)
Swift Error Handling
Apache Mina开发手册
It feels great to know you learned something, isn‘t it?
With pictures and texts, summarize the basic review of C language in detail, so that all kinds of knowledge points are clear at a glance?
Differences between initial, inherit, unset, revert and all