当前位置：网站首页>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
边栏推荐
- Record your vulnhub breakthrough record
- [combinatorics] permutation and combination (multiple set permutation | multiple set full permutation | multiple set incomplete permutation all elements have a repetition greater than the permutation
- 基于同步坐标变换的谐波电流检测
- Tianyi ty1208-z brush machine detailed tutorial (free to remove)
- Tensorflow binary installation & Failure
- [problem exploration and solution of one or more filters or listeners failing to start]
- Sword finger offer04 Search in two-dimensional array [medium]
- [combinatorics] permutation and combination (the combination number of multiple sets | the repetition of all elements is greater than the combination number | the derivation of the combination number
- 初入职场，如何快速脱颖而出？
- 4. Wireless in vivo nano network: electromagnetic propagation model and key points of sensor deployment
猜你喜欢
2021 autumn Information Security Experiment 1 (password and hiding technology)
Low code platform international multilingual (I18N) technical solution
Xctf mobile--app2 problem solving
社交社区论坛APP超高颜值UI界面
Eureka self protection
强大的头像制作神器微信小程序
Social community forum app ultra-high appearance UI interface
Detailed explanation of the most complete constraintlayout in history
How to convert a decimal number to binary in swift
Drop down refresh conflicts with recyclerview sliding (swiperefreshlayout conflicts with recyclerview sliding)
随机推荐
Sword finger offer06 Print linked list from end to end
Enter the length of three sides of the triangle through the user, and calculate the area of the triangle, where the length is a real number
context. Getexternalfilesdir() is compared with the returned path
Swift Error Handling
Sword finger offer10- I. Fibonacci sequence
elastic_ L02_ install
The foreground uses RSA asymmetric security to encrypt user information
剑指Offer07. 重建二叉树
Xctf mobile--app2 problem solving
Sword finger offer03 Repeated numbers in the array [simple]
Apache Mina开发手册
ImportError: No module named examples. tutorials. mnist
Sword finger offer07 Rebuild binary tree
alright alright alright
[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)
启用MemCached的SASL认证
Define a list, store n integers, and calculate the length, maximum value, minimum value and average value of the list
Summary of error prone knowledge points: Calculation of define s (x) 3*x*x+1.
十条职场规则
[ManageEngine] the role of IP address scanning