ES6 承诺 promise

承诺 promise

关键字：

1. promise 承诺
2. resolve 兑现
3. reject 拒绝
4. then 然后
5. 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)
	})

回调函数

1. 普通回调
   缺点：个数多了会臃肿，嵌套太多,可读性差

function say(str,time,callback){
	//参数str：要说的话    time：延时时间    callback 回调
		setTimeout(()=>{
			console.log(str);
				if(callback){callback()}
			},time)
		}
		say("你好，能加个微信吗？",2000,function(){
			say("我好喜欢你",3000,function(){
				say("邀请你百年后葬进我家祖坟",5000)
		})
	})

2. 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>