promise 對象之 deferred 對象 portal 實例環境搭建
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中的依賴文件
promise 對象之 deferred 對象 portal 實例環境搭建