什么是promise,哪些应用场景
承诺,是异步编程的一种解决方案.所谓Promise,它本身就是一个容器,里面保存着异步操作的结果,它有三种状态:
- pending(进行中)
- resolved(成功)
- rejected(失败
- Promise.all() //实现当所有的图片全部加载完毕,才显示在页面中
- Promise.race() //实现谁先加载完毕就显示谁
- 获取容器结果:.then()//兑现承诺的回调||.catch()//拒绝承诺的回调
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><button id="btn">加载</button></p>
<div id="box1">
</div>
<div id="box2">
<p>race方法 谁先加载完毕显示谁</p>
</div>
<div id="box3">
<p>当所有的图片全部加载完毕,才显示在页面中</p>
</div>
<script>
var pics = [
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.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.style.width = "200px";
img.onload = function(){resolve(img)};
img.onerror = function(){reject(img)};
})
}
//按钮加载
btn.onclick = function(){
loadImg(pics[0])
.then(res=>{
box1.appendChild(res);
return loadImg(pics[1]);
})
.then(res=>{
box1.appendChild(res);
return loadImg(pics[2]);
})
.then(res=>{
box1.appendChild(res);
})
}
//race加载
Promise.race([loadImg(pics[0]),loadImg(pics[1]),loadImg(pics[2])])
.then(res=>{
box2.appendChild(res);
})
//all加载
Promise.all([loadImg(pics[0]),loadImg(pics[1]),loadImg(pics[2])])
.then(res=>{
for(img in res){
box3.appendChild(res[img]);
}
})
</script>
</body>
</html>