ES6 Promise对象

Promise对象

1.Promise
Promise对象,是ES6一种异步编程的方案。封装了异步操作和成功、失败的调回。承诺、保证。如果执行的状态发生改变,成功就是成功,失败了就是失败了。

	状态:
			pending		进行中
			resolved		解决(成功)
			rejected		拒绝(失败)

2.为什么用Promise?解决了什么问题?
2.1.解决了回调地狱的问题(Callback Hell)

//firstAsync,异步操作1:执行完后调用回调函数
firstAsync(function(result){
	//...处理result数据
	secondAsync(function(result2){
		//...处理result2数据
		ThirdAsync(function(result3){
			//...处理result3数据
			try{
				//报错...
			} eatch(ex)
		});
	});
});
//报错回到这里,处理异常,提示用户xxx信息
	//异步操作:不行
	firstAsync(function(result){
		//...处理result数据
	});
	secondAsync(function(result2){
		//...处理result2数据
	});
	ThirdAsync(function(result3){
		//...处理result3数据
	});
	console.log('三个操作完成result='+result);

相当于Java中main方法启动了多个线程

//多个连续的异步操作,改为Promise方式之后:
firstAsync().then(function(result){
	return secibdAsync();//返回封装了第二个异步操作的Promise
}).then(function(result)){
	return thirdAsync();//返回封装了第三个异步操作的Promise
}).then(function(result){

});
//把异步代码当做同步代码,按照先后顺序来编写

3.如何使用Promise?

let promise1 = new Promise(function(resolve,reject){
	//异步操作代码,看情况调用resolve或reject
	if(xxx){//业务代码执行完成
		resolve()
	}else{
		reject("错误提示信息");
	}
});

promise1.then(function(result){callback
	//成功后回调代码...
});

Promise对象的实践代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="imgParent" style="width: 100%;height: 900px;">

		</div>
		<script>
			//业务需求:用异步的方式从远程加载多个图片,按先后顺序
			//用Promise的方式
			let div = document.getElementById("imgParent");
			//加载图片的方法,传入图片路径
			function loadImg(src) {
				//返回一个Promise对象
				return new Promise(function(resolve, reject) {
					setTimeout(function() {
						let img = new Image(); //创建一个HTML img 元素
						img.src = src;
						div.appendChild(img);
						img.width = 440;
						img.height = 330;
						//如果该元素的onload事件触发说明正常加载了
						img.onload = function() {
							//resolve会把当前promise对象标记为resolve状态,返回这个状态的Promise对象
							//resolve的参数会传给callback
							resolve(img); //返回一个成功状态(resolved状态)的Promise对象
						}
						//如果该元素的onerror事件触发说明错误加载了
						img.onerror = function() {
							//reject会把当前promise对象标记为reject状态,返回这个状态的Promise对象
							//resolve的参数会传给callback
							reject("加载图片失败:" + src); //返回一个rejected状态的Promise对象
						}

					}, 3000); //延迟3秒再加载图片,模拟异步操作
				})
			}

			let prom1 = loadImg('./img/1.jpg');//得到加载图片1的Promise对象
			
			prom1.then(function(img) { //加载图片1,成功回调
				console.log("图片加载成功:" + img.src);
				return loadImg('./img/2.jpg'); //返回第二张图片的Promise对象
			}).then(function(img) {
				console.log("图片加载成功:" + img.src);
				return loadImg('./img/3.jpg'); //返回第三张图片的Promise对象
			}).then(function(img) {
				console.log("图片加载成功:" + img.src);
			})
		</script>
	</body>

</html>

你可能感兴趣的:(ES6 Promise对象)