es6的Promise在项目中的妙用

es6的Promise在项目中的妙用

一：异常页面处理中用promise，异常页面包括未开始，已结束，未登录，网络错误，风险页，异常页

1，怎么把这些页面组织起来呢？通过单一的Promise.all来组织

//对请求到的数据对象进行处理，得出aaa数据
export default function getListData(){
//有a，b，c三个请求，拉取到数据以后，解构出来aa，bb，cc三个数据对象
	return Promise.all([a,b,c])
	.then(([aa,bb,cc]) => {
		if(){return aaa}
		else if(){return 未开始}
		else if(){return 已结束}
	})
}
//引入页面
getListData().then(data => {
	switch(stage){
		case ‘start’: 
		未开始
		break
		case ‘end’:
		已结束
		break
	}
})

2，多个请求各自throw抛出错误，再通过try{}catch(){}捕获

try{
	getListData()
}catch(e){
	processEntryErr() //处理错误函数
}
getListData (){
	请求…
	switch(code){
		case 0:{
			break
		}
		case -1:{
			throw ‘end’
		}
	}
}

二：多个弹框的状态维持

• 应用场景为，加载一个页面时首选要弹一个弹框，在这个弹框里点击按钮，再出一个弹框。
• 在点击按钮时，在页面不能显示的同时只弹出一个弹框。
• 这时我们引入promise的异步功能，即不调用resolve函数，promise就不会结束的特性，
• 整个进程只保持出现一个弹框。
• 再配合async 和await就可以保持住页面的进程，不会出现页面其他的干扰内容。

let resolve = null
let promise = new Promise(tmpResolve => {
	resolve = tmpResolve
})
resolve() //整个弹框流程结束时，调用

三：在代码中mock数据

遇到和后端同时开发的时候，通过resolve包装静态数据，来暂时代替接口返回的数据，不失为快速开发的手段

async getData(){
	const {code,data}= await(
		Promise.resolve({
			code:0,data:{}
		})
	)
	if(code){}
	} 
}

四：利用Promise.race设置超时

• all的意思是，全部执行，不管跑的多慢，都要等。
• 这就出问题了，万一有进程卡住呢。所以就用了race，意思是谁跑的快，就返回谁。就是赛跑的意思。
• 如果在设定的时间里，all里有的进程没有返回，就直接返回setTimeout的结果

Promise.race([
	Promise.all([a,b,c]),
	new Promise(resolve => setTimeout(resolve,1000))
])

五：利用Promise.catch捕获错误，防止影响页面显示

• then方法有两个参数，solve和reject，都是函数，solve成功时调用，reject失败时调用。
• catch相当于then方法的第二个参数reject，一般catch写在最后面
• catch也有另一个作用，捕获promise及then里的错误，防止卡住js，影响页面显示

Promise.all([a,b,c]).then(
	value =>{},
	error => {}
).catch(
	error=>{}
)

本文是Promise的小技巧，基础知识请阅读阮一峰老师的《ECMAScript 6 入门》