写在开头
本文将带你深入理解之Promise篇
后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！
如果想更多了解ES6，请参考之前写过的一些文章：
ES6 一文弄懂 var let const 三剑客区别 吊打面试题
ES6 深入理解 …拓展运算符 合并数组及demo选项卡实例
ES6 深入理解之字符串篇 保姆级 教你用js写选项卡demo
ES6 深入理解之number篇 保姆级 教你用js写选项卡demo
ES6 深入理解之方法篇 保姆级 教你用js写选项卡demo
Pending、Resolved(决定)、Rejected(拒绝)
then
new Promise(function(Resolved,reject){
Resolved();
reject();
}).then(function(){
alert('成功')
},function(){
alert('失败')
})
Promise 是个对象
类似 一个事情
事情 就会 有 成功 或者 失败
只要触发一个 这个函数就完成了自己任务
类似于 jquery 中 one 只执行一次
then catch
new Promise(function(Resolved,reject){
Resolved('hehehehe');
//reject();
}).then(function(x){
console.log(x)
}).catch(function(){
console.log('2313213')
})
封装
function showPromise(res){
return new Promise((resolve,reject)=>{
resolve(res)
}).then((x)=>{console.log(x)},()=>{
})
}
showPromise('666');
showPromise('123');
showPromise('哈哈哈');
promise的无限回调
promise 厉害之处就是能无限的回调
new Promise(function(Resolved,reject){
Resolved('hehehehe');
}).then(function(x){
alert(x);
return 'ashkdajs';
}).then(function(x){
alert(x);
return '101010'
}).then(function(x){
alert(x);
})
用promise写一个简易显示隐藏卡片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 200px;
height: 200px;
background: #CCCCCC;
display: block;
}
</style>
</head>
<body>
<input type="button" id="ipt" value="显示/隐藏" />
<div id="div1"></div>
<script type="text/javascript">
let cc=0;
ipt.onclick = x =>{
cc++;
new Promise((success,error)=>{
cc%2==1?success():error();
}).then(()=>{
div1.style.display="block";
}).catch(()=>{
div1.style.display="none";
})
}
</script>
</body>
</html>
throw 抛出异常
抛出 异常throw ‘出大事了 下面就别执行了’
类似的有：
console.error();
console.warn();
throw '抛出异常'
race 竞速方法
race ->只看第一个promise 成功就成功 ，失败就失败
Promise.race([new Promise((succ,error)=>{
//succ('12312');
setTimeout(error,1000,'1');
}),new Promise((succ,error)=>{
setTimeout(succ,1200,'2');
}),new Promise((succ,error)=>{
setTimeout(succ,1400,'3');
})]).then((x)=>{
console.log(x+'suss');
},(x)=>{
console.log(x+'error')
})
all 规整方法
all ->要不然就是全胜 要不然就是 失败
Promise.all([new Promise((succ,error)=>{
setTimeout(succ,1000);
}),new Promise((succ,error)=>{
setTimeout(succ,2000);
}),new Promise((succ,error)=>{
setTimeout(error,1000);
})]).then(()=>{
console.log('成功！')
}).catch(()=>{
console.log('失败')
})
reject
Promise.reject(['1','2']).then((f,x)=>{
//console.log(x)
}).catch((a)=>{
console.log(a)
})
自动选项卡 demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input.active{
background: red;
}
.outNode>div{width: 200px;height: 200px;background: #ccc;display: none;}
.outNode>div:first-of-type{
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
const $=obj=>[...document.querySelectorAll(obj)];
const jsonDate={
'vlaueName':['小黑','小白','小红'],
'innnerHtml':[
'变黑了','变瘦了','变高了'
]
};
let Index = 0;
const createNode=json=>`<div class=outNode>
${json.vlaueName.map((x)=>`<input type=button value=${x}>`).join('')}
${json.innnerHtml.map((x)=>`
<div>${x}</div>
`).join('')}
</div>`;
document.body.innerHTML = createNode(jsonDate);
let allInput = new Set($('input'));
let allDiv = new Set($('.outNode>div'));
[...allInput][0].className = 'active';
[...allInput].forEach((x,y)=>{
x['onclick']=()=>{
[...allDiv].forEach(f=>f.style.display='none');
[...allDiv][y].style.display = 'block';
}
});
setInterval(()=>{
Index++;
(Index == [...allInput].length) &&(Index=0);
[...allInput].forEach(x=>x.className='');
[...allInput][Index].className = 'active';
[...allDiv].forEach(x=>x.style.display='none');
[...allDiv][Index].style.display = 'block';
},1000);
</script>
</body>
</html>
总结
Pending、Resolved(决定)、Rejected(拒绝)
catch
race 竞速方法
all 规整方法
学如逆水行舟，不进则退
