承诺 promise
关键字:
- promise 承诺
- resolve 兑现
- reject 拒绝
- then 然后
- catch 捕捉失败
案例:
2秒后说:你好,能加个微信吗?
3秒后说:我好喜欢你
5秒后说:邀请你百年后葬进我家祖坟
var p = new Promise(function(resolve,reject){
//承诺内容
var num = Math.random();
if(num>0.5){
//resolve 成功返回的值
resolve ("买一套大房子");
}else {
// reject 失败 返回的值
reject ("等等再买吧!")
}
})
p.then(function(res){
//兑现承诺
console.log(res);
})
.catch(function(err){
//不兑现
console.log(err)
})
回调函数
- 普通回调
缺点:个数多了会臃肿,嵌套太多,可读性差
function say(str,time,callback){
//参数str:要说的话 time:延时时间 callback 回调
setTimeout(()=>{
console.log(str);
if(callback){callback()}
},time)
}
say("你好,能加个微信吗?",2000,function(){
say("我好喜欢你",3000,function(){
say("邀请你百年后葬进我家祖坟",5000)
})
})
- promise 承诺方式
用promise 可解决回调层级太深等的问题,扁平化(在一层)
下一个then是上一个return的结果
function say(str,time){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve (str)
},time)
})
}
say("你好,能加个微信吗?",2000)
.then(res=>{
console.log(res);
return say("我好喜欢你",3000)
})
.then(res=>{
console.log(res);
return say("邀请你百年后葬进我家祖坟",5000)
})
.then(res=>{
console.log(res); //下一个then是上一个return的结果
})
Promise.race 按顺序加载
<script type="text/javascript">
var arr = [
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
]
//同时加载三张图片,哪张图片先加载出来用哪张
function loadImg(url){
return new Promise((resolve,reject)=>{
var img = document.createElement("img");
//创建一个图片节点
img.src=url;
img.width=300;
img.onload = function(){
//图片加载事件
resolve(img);//返回图片
}
img.onerror=function(e){
reject(e) //失败 e失败事件对象
}
})
}
// Promise.race 比赛 哪个promise最先resolve 返回哪个
Promise.race([
loadImg(arr[0]),
loadImg(arr[1]),
loadImg(arr[2])
])
.then(res=>{
document.body.append(res);
//将接受的res渲染到页面
})
.catch(err=>{console.log(err)})
</script>