Promise object Deferred Object Portal instance environment construction

The deferred object of the Promise object

Portal Instance Environment setup

----------------------------------------------

1. What is scaffolding: Others set up a good environment to download and use

Ajax

Parallel/serial

Promise.all

-----------------------------------------------

Promise.all

Request two at the same time and then return as if there is one error the other one also goes wrong

-----------------------------------------------

Const Getjson = function (url,type, data) {
Const PROMISE = new Promise (function (resolve, reject) {
Const Handler = function () {
if (this.readystate!== 4) {
Return
};
if (this.status = = = 200) {
Resolve (This.response);
} else {
Reject (new Error (This.statustext));
}
};
Const CLIENT = new XMLHttpRequest ();
Client.open (type, URL);
Client.onreadystatechange = handler;
Client.responsetype = "JSON";
if (type = = ' Get ') {
Client.send ();
}else {
Client.setrequestheader ("Content-type", "Application/json");
Client.send (json.stringify (data));
}
});
return promise;
};

$ (function () {
Add message
$ (". Submit"). Click (() = {
Submit (TRUE);
});
Modify Message
$ (". Update"). Click (() =>{
Submit (FALSE);
});
Delete message
$ (". DeleteAll"). Click (() = {
Getjson ("/map/delall", ' delete ')
. Then (function (JSON) {
$ (". Messagelist"). HTML (' All data cleared ');
}, function (Error) {
Console.error (' ERROR ', error);
});

});
View Message
$ (". Viewmes"). Click (() = Listshow ());
Submit
Let Submit = (Isadd) =>{
Let _name = $ (". Name"). Val (),
_message = $ (". Message"). Val ();
if (_name = = "| | _message = =") {
Alert (' Please enter information! ‘);
return false;
}
$ (". Name,.message"). Val ("");
Isadd? Add (_name, _message): Upd (_name, _message);
};
Add data
Let add = (name, message) = = {
Getjson ("/map/add", ' post ', {name:name, message:message})
. Then (function (JSON) {
Listshow ();
}, function (Error) {
Console.error (' ERROR ', error);
});
};
Delete data
Let del = (name) =>{
Getjson ("/map/del", ' delete ', {name:name})
. Then (function (JSON) {
Listshow ();
}, function (Error) {
Console.error (' ERROR ', error);
});
};
Edit Data
Let upd = (name, message) =>{
Getjson ("/map/upd", ' put ', {name:name, message:message})
. Then (function (JSON) {
$ ("#inputEmail3"). attr (' disabled ', false);
Listshow ();
}, function (Error) {
Console.error (' ERROR ', error);
});
};
Binding future elements
$ (". Messagelist"). On (' click ', '. Del ', (e) =>{
Del ($ (e.target). attr (' name '));
});
$ (". Messagelist"). On (' click ', '. Upd ', (e) =>{
Let value = $ (e.target). Val ();
$ ("#inputEmail3"). attr (' disabled ', true);
$ (". Name"). Val (Value.split (', ') [0]);
$ (". Message"). Val (Value.split (', ') [1]);
});
List display
Let Listshow = () = () = {
Native Promise
/*getjson ("/map/get", ' get '). Then (function (d) {
_showlist (d);
}, function (Error) {
Console.error (' ERROR ', error);
});*/

//$.ajax () is below the 1.5.0 version of jquery, which returns the Xhr object, above the 1.5.0 version, and returns the deferred object, which can be chained.
//Chained notation
Let list = $ (". Messagelist"), str = "";
$.ajax ({url: "/map/get", DataType: "JSON", type: "Get"})
. Do (function (d) {
for (let i=0; i<d.length; i++) {
str + = ' <li class= "List-group-item" ><span class= "key" >${d[i].key}</span><span> said: </ Span><span class= "value" >${D[I].VALUE}</SPAN>
<span style= "float:right;" ><button class= "del" Name= "${d[i].key}" > Delete </button>
<button class= "upd" value= "${d[i].key},${ D[i].value} "> Update </button></span></li>";
}
list.html (str);
})
. Fail (function () {alert ("Error! "); });
};

Let _showlist = (d) =>{
Let list = $ (". Messagelist"), str = "";
for (let i=0; i<d.length; i++) {
str + = ' <li class= "List-group-item" ><span class= "key" >${d[i].key} </span><span> said: </span><span class= "value" >${D[I].VALUE}</SPAN>
<span style= " Float:right; " ><button class= "del" Name= "${d[i].key}" > Delete </button>
<button class= "upd" value= "${d[i].key},${ D[i].value} "> Update </button></span></li>";
}
list.html (str);
};
//Query data
//chained serial
$ (". Querythen"). Click (() = Querythen ());
Let Querythen = () = {
$.ajax ({url: "/map/add1", DataType: "JSON", type: ' Get '})
. Then (data = {
return $). Get ("/map/add2", data.result.id);
})
. Then (data = {
alert (data);
}, () = {alert ("Error! "); });
};

//Method 1
Let addPromise1 = new Promise ((resolve,reject) + = {
Getjson ("/map/add1", ' get '). Then (function (d) {
Resolve (d);//Return
}, function (Error) {
Console.error (' Error ', error);
});
});
//Method 2
Let AddPromise2 = new Promise ((resolve,reject) + = {
Getjson ("/map/add2", ' get '). Then (function (d) {
Resolve (d);//Return
}, function (Error) {
Console.error (' Error ', error);
});
});
//Parallel when multiple requests are completed return
$ (". Querywhen"). Click (() = Querywhen ());
Let Querywhen = () = {
/*$.when ({url: "/map/add1", DataType: "JSON", type: "Get"}), $.ajax ({url: "/MAP/ADD2") , DataType: "JSON", type: "Get"})
. Then ((data1,data2) = {
Console.log (data1[0]);
Console.log (Data2[0]);
}, () = {alert ("Error! "); }); */

Promise.all ([
addpromise1,//method of request for transmission
AddPromise2
]). Then ([ADD1,ADD2]) =>{
Console.log (ADD1);
Console.log (ADD2);
}, function (Error) {
Console.error (' ERROR ', error);
});
};
})
-----------------------------------------------
A serial set of executed

Chained notation
Chained notation serial
$ (". Querythen"). Click (() = Querythen ());
Let Querythen = () = () = {
$.ajax ({url: "/map/add1", DataType: "JSON", type: "Get"})
. Then (data = {
Return $.get ("/map/add2", data.result.id);//The ID of the previous request obtained
})
. Then (data = {
alert (data);
}, () = {alert ("Error! "); });
};

-----------------------------------------------

Parallel walking at the same time

$.when ({$.ajax ({url: "/map/add1", DataType: "JSON", type: "Get"}), $.ajax ({url: "/map/add2", DataType: "JSON", type: "Get" }))
. then ((data1,data2) = {
Console.log (Data1[0]);
Console.log (data2[0]);//Two All of them are successful.
}, () = {alert ("Error! "); });

Many of the items used in the project

-----------------------------------------------

Portal Development Environment Building

Lib put all the JS

The bottom JS Require.js

-----------------------------------------------

Amd

Cmd

. BOWERRC

In this file, select the download directory to install Bower

-----------------------------------------------

https://www.gulpjs.com.cn/

Ways to build your environment

Parallel serial

-----------------------------------------------

Build several times over and over again

1.1 Environment
Operating Environment Nodejs
Compile Scss,js with Gulp automation, etc.
Using Bower to manage dependency plugins
Using Requirejs as the module loader
Using bootstrap CSS as a style frame
Dependent Jquery,jquery-ui two libraries
1.2 Project directory
Node_modules for dependent module files
. BOWERRC is a bower configuration file that contains the module installation directory configuration
Bower.json for Bower configuration file, including dependent modules, etc.
Gulpfile.js for Gulp Task profiles
Package.json for the program configuration file, including NPM dependency module, etc.
Lib is a dependent file in Bower.json. dependencies

Promise object Deferred Object Portal instance environment construction