ES6语法——Promise

Promise

• Promise是一种异步编程的解决方案

什么是异步

• 有一个步骤，A执行完再执行B
• 在程序上怎么实现A执行完再执行B呢，这个步骤有两种方式，一种是回调方式，另一种事件触发的方式
• Promise是区别于以上两种方式的

Promise的作用

• 解决异步操作问题的

Promise的基本用法

{	
	//模拟es5中ajax请求
	//es5中回调解决异步场景
	let ajax = function(callback){
		console.log('执行');
		setTimeout(function(){
		//判断回调是否存在，存在就执行下一步
			callback&&callback.call()
		},2000)
	};
	ajax(function(){console.log('timeout1')})
	//es5回调处理异步的场景
	//如果过程复杂，那就会有很多回调，回调使用很多，回调之间的顺序问题，使得后期维护难以阅读
}
{
	//Promise处理相同问题
	let ajax = function(){//注意这里没有传递参数
		console.log('执行2')//执行完后直接返回 new Promise()
		//返回对象，也就是Promise实例
		//Promise实例具有一个then的方法，也就是执行下一步的功能
		//怎么去执行呢，有两个参数resolve 、 reject
		return new Promise(function(resolve,reject){
			//resolve:要执行下一步的操作
			//reject:要中断当前的操作
			//setTimeout 用于模拟通讯时间
			setTimeout(function(){
				resolve()
			},2000);
		})
	};
	//下面是使用
	ajax().then(function(){
	//ajax()执行之后是返回的是Promise实例，
	//Promise实例具有then方法（即下一步）
	//then参数就是这个函数体就是下一步
		console.log('promise','timeout2');
		//...这个函数体就是resolve
	},function(){//这个不调用可以不写
		//...这个函数体就是reject
	})
}
//无注释版
{
	let ajax = function(){
		return new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve();
			},2000)
		})
	}
	ajax().then(function(){console.log('resolve')})
}
//多次回调
{
	let ajax = function(){
		console.log('then1')
		return new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve();
			},2000)
		})
	}
	ajax()
	.then(function(){
		console.log('then2')
		return new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve();
			},2000)
		})
	})
	.then(function(resolve,reject){
		console.log('then3')
		setTimeout(function(){
			resolve()
		},2000)
	})
}
//串型中出现错误如何捕获错误
//catch
{
	let ajax = function(num){
		console.log('then1')
		return new Promise(function(resolve,reject){
			if(num>5){
				resolve();
			}else{
				throw new Error('出错了')
			}
		})
	}
	ajax(4).then(function(){
		console.log('log',6);
	}).catch(function(error){//error参数就是捕获错误
		console.log('catch',error)//catch Error: 出错了
	})
}

Promise.all 、Promise.race 两个方法的使用场景

• 前端fade流
• fade流内容会有多图的形式，比三张图加载，三张图会有覆盖广告，一个个加载会有闪烁，用户体验不好，三张图同时加载完再添加到页面上，这样用户就看不到图片加载的过程也看不到闪烁，不然加载三张图的时间会有前有后，由于网络延时，有些图片加载成功，有些图片加载失败
• 假设使用Promise，三张图片全部加载成功之后再添加到页面上，提高用户体验

//Promise.all()
{
	//所有图片加载完再添加到页面
	function loadImg(src){
	//loadImg函数返回Promise实例
	//使用异步的方式去加载图片
		return new Promise((resolve,reject)=>{
			let img = document.createElement('img');
			img.src = src
			//img.onload监听图片是否加载完成
			img.onload = function(){
			//通过下一步的resolve传递参数
				resolve(img);
			}
			img.onerror = function(err){
				reject(err);
			}
		})
	}
	//加载完成之后添加到页面上
	function showImgs(imgs){
		imgs.forEach(img=>document.body.appendChild(img));
	}
	//Promise.all 把多个Promise实例当作一个Promise实例
	//Promise.all([])是个数组，数组里传递进来的是多个Promise实例
	//当所有Promise实例的状态发生改变的时候，那么新的Promise实例才会发生变化
	//在这里也就是说下面三个状态全部完成之后，才会触发新的Promise对象，所有Promise对象才有then的方法去执行showImgs
	//Promise.all返回的是一个Promise实例
	Promise.all([
		loadImg(''),//图片地址
		loadImg(''),
		loadImg('')
	]).then(showImgs);
}
//Promise.race 有三张图片，位于不同的位置，页面需要加载一张图片，我也不知道三张图片哪个返回比较快，我不关心三张图片来源，只要加载出一个就可以，先到先得。哪个到了就显示哪个
{
	//有一个图片加载完就添加到页面
	function loadImg(src){
	//loadImg函数返回Promise实例
	//使用异步的方式去加载图片
		return new Promise((resolve,reject)=>{
			let img = document.createElement('img');
			img.src = src
			//img.onload监听图片是否加载完成
			img.onload = function(){
			//通过下一步的resolve传递参数
				resolve(img);
			}
			img.onerror = function(err){
				reject(err);
			}
		})
	}
	function showImgs(img){
		let p = document.createElement('p');
		p.appendChild(img);
		document.body.appendChild(p);
	}
	//Promise.race中有一个率先改变，race就改变，就执行then（下一步）
	Promise.race([
		loadImg(''),//图片地址
		loadImg(''),
		loadImg('')
	]).then(showImgs);
}