Promise的使用

什么是promise,哪些应用场景

承诺,是异步编程的一种解决方案.所谓Promise,它本身就是一个容器,里面保存着异步操作的结果,它有三种状态:

  1. pending(进行中)
  2. resolved(成功)
  3. 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>

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页