promise 对象之 deferred 对象 portal 实例环境搭建

Posted 2021-01-10 shaozhu520

 

promise 对象之 deferred 对象

portal 实例环境搭建

 

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

1.什么是脚手架：别人搭建好的环境 下载下来使用

AJAX

并行/串行

promise.all

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

promise.all

同时请求两个 然后同时返回 如有一个出错 另外一个也出错

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

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() {
//添加留言
$(".submit").click(() => {
submit(true);
});
//修改留言
$(".update").click(()=>{
submit(false);
});
//删除留言
$(".deleteAll").click(() => {
getJSON("/map/delAll",‘delete‘)
.then(function(json) {
$(".messageList").html(‘全部数据已经清除‘);
}, function(error) {
console.error(‘出错了‘, error);
});

});
//查看留言
$(".viewMes").click(()=> listShow());
//提交
let submit = (isAdd) =>{
let _name = $(".name").val(),
_message = $(".message").val();
if(_name ==‘‘ || _message ==‘‘) {
alert(‘请输入信息！‘);
return false;
}
$(".name,.message").val("");
isAdd ? add(_name, _message) : upd(_name, _message);
};
//添加数据
let add = (name, message) => {
getJSON("/map/add",‘post‘, {name: name, message: message})
.then(function(json) {
listShow();
}, function(error) {
console.error(‘出错了‘, error);
});
};
//删除数据
let del = (name) =>{
getJSON("/map/del",‘delete‘, {name:name})
.then(function(json) {
listShow();
}, function(error) {
console.error(‘出错了‘, error);
});
};
//编辑数据
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);
});
};
//绑定未来元素
$(".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]);
});
//列表显示
let listShow = () => {
//原生promise
/*getJSON("/map/get",‘get‘).then(function(d) {
_showList(d);
}, function(error) {
console.error(‘出错了‘, error);
});*/

//$.ajax() 低于1.5.0版本的jQuery，返回的是XHR对象，高于1.5.0版本，返回的是deferred对象，可以进行链式操作。
// 链式写法
let list = $(".messageList"),str = "";
$.ajax({url:"/map/get",dataType:"json",type:"get"})
　　.done(function(d){
for (let i=0; i<d.length; i++) {
str += `<li class="list-group-item"><span class="key">${d[i].key}</span><span>说：</span><span class="value">${d[i].value}</span>
<span style="float:right;"><button class="del" name="${d[i].key}">删除</button>
<button class="upd" value="${d[i].key},${d[i].value}">更新</button></span></li>`;
}
list.html(str);
})
　　.fail(function(){ alert("出错啦！"); });
};

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>说：</span><span class="value">${d[i].value}</span>
<span style="float:right;"><button class="del" name="${d[i].key}">删除</button>
<button class="upd" value="${d[i].key},${d[i].value}">更新</button></span></li>`;
}
list.html(str);
};
//查询数据
//链式写法 串行
$(".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("出错啦！"); });
};

//方法1
let addPromise1 = new Promise((resolve,reject) => {
getJSON("/map/add1",‘get‘).then(function(d) {
resolve(d);//返回
}, function(error) {
console.error(‘出错了‘, error);
});
});
//方法2
let addPromise2 = new Promise((resolve,reject) => {
getJSON("/map/add2",‘get‘).then(function(d) {
resolve(d);//返回
}, function(error) {
console.error(‘出错了‘, error);
});
});
// 并行 when 多个请求完成后返回
$(".queryWhen").click(()=> queryWhen());
let queryWhen = ()=> {
/*$.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]);
}, () => { alert("出错啦！"); });*/

Promise.all([
addPromise1,//传的请求方法
addPromise2
]).then(([add1,add2])=>{
console.log(add1);
console.log(add2);
}, function(error) {
console.error(‘出错了‘, error);
});
};
})
-----------------------------------------------
//串行 套着执行的

// 链式写法
//链式写法 串行
$(".queryThen").click(()=> queryThen());
let queryThen = ()=> {
$.ajax({url:"/map/add1",dataType:"json",type:"get"})
　　.then(data => {
return $.get("/map/add2", data.result.id);//传上一个请求获取到的ID
})
.then(data => {
alert(data);
}, () => { alert("出错啦！"); });
};

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

//并行 同时走的

$.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]);//两个都成功了才会进来
}, () => { alert("出错啦！"); });

项目中用的很多

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

portal 开发环境搭建

 

lib 放所有的js

最下面的 js require.js

 

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

AMD

CMD

 

.bowerrc

这个文件 里面选择安装bower 的下载目录

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

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

 

搭建环境的方法

并行 串行

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

反复多搭建几次

1.1环境
运行环境nodejs
使用gulp自动化编译scss，js等
使用bower管理依赖插件
使用requirejs作为模块加载器
使用bootstrap css作为样式框架
依赖jquery，jquery-ui两个库
1.2项目目录
node_modules为依赖模块文件
.bowerrc 为bower配置文件,包含模块安装目录配置
bower.json为bower配置文件,包含依赖模块等
gulpfile.js为gulp任务配置文件
package.json为程序配置文件,包含npm依赖模块等
Lib为bower.json ?dependencies中的依赖文件