当前位置：网站首页>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
边栏推荐
- Sqoop1.4.4原生增量导入特性探秘
- Attack and defense world mobile--ph0en1x-100
- node的ORM使用-Sequelize
- 【计网】第三章 数据链路层（2）流量控制与可靠传输、停止等待协议、后退N帧协议（GBN）、选择重传协议（SR）
- Sword finger offer05 Replace spaces
- Togaf certification self-study classic v2.0
- Simple use and precautions of kotlin's array array and set list
- [problem exploration and solution of one or more filters or listeners failing to start]
- Eureka自我保护
- 十条职场规则
猜你喜欢
LeetCode 0556. Next bigger element III - end of step 4
公纵号发送提示信息(用户微服务--消息微服务)
Powerful avatar making artifact wechat applet
How to convert a decimal number to binary in swift
studio All flavors must now belong to a named flavor dimension. Learn more
01 three solutions to knapsack problem (greedy dynamic programming branch gauge)
initial、inherit、unset、revert和all的区别
![[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]
Differences between initial, inherit, unset, revert and all
Eureka self protection
随机推荐
[combinatorics] permutation and combination (multiple set permutation | multiple set full permutation | multiple set incomplete permutation all elements have a repetition greater than the permutation
剑指Offer09. 用两个栈实现队列
记录自己vulnhub闯关记录
[exercise 7] [Database Principle]
Grid connection - Analysis of low voltage ride through and island coexistence
idea将web项目打包成war包并部署到服务器上运行
Write a simple nodejs script
RedHat5 安装Socket5代理服务器
Sword finger offer10- I. Fibonacci sequence
剑指Offer06. 从尾到头打印链表
Exploration of sqoop1.4.4 native incremental import feature
阿里大于发送短信(用户微服务--消息微服务)
[Exercice 5] [principe de la base de données]
Use Tencent cloud IOT platform to connect custom esp8266 IOT devices (realized by Tencent continuous control switch)
How to get user location in wechat applet?
Togaf certification self-study classic v2.0
Sword finger offer14 the easiest way to cut rope
Solve the problem of VI opening files with ^m at the end
LeetCode 0556. Next bigger element III - end of step 4
Differences and connections between final and static