Promise的使用

最新推荐文章于 2022-10-19 19:31:04 发布

竹取*

最新推荐文章于 2022-10-19 19:31:04 发布

阅读量388

点赞数

分类专栏：前端文章标签： vue.js 前端 es6

本文链接：https://blog.csdn.net/LWH8011/article/details/107057270

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

什么是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>

竹取*

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Promise的使用

什么是promise，哪些应用场景承诺,是异步编程的一种解决方案.所谓Promise，它本身就是一个容器，里面保存着异步操作的结果，它有三种状态:pending(进行中)resolved(成功)rejected(失败Promise.all() //实现当所有的图片全部加载完毕，才显示在页面中Promise.race() //实现谁先加载完毕就显示谁获取容器结果:.then()//兑现承诺的回调||.catch()//拒绝承诺的回调<!DOCTYPE html><
复制链接

扫一扫