Vue ---Promise

Promise

概念

对异步操作进行封装
是异步编程的一种解决方案
Promise 解决ajax无限极嵌套ajax

Promise 三种状态：pending、fulfill、reject

基本语法 链式调用

setTimeout();是一个模拟的网络请求。实际开发重视axios

第二种写法：写到一起

//Promise的参数本身是一个函数，也就是resolve,reject是一个函数
//一秒后执行一个业务逻辑，再过一秒再执行另外一个业务逻辑
//箭头函数：()=>{}
new Promise((resolve,reject)=>{
//异步操作
 setTime((data)=>{
 //成功的时候调用resolve
// resolve(data)
//错误的时候
reject("error")
},1000)

}).then((data)=>{
	//第一次的业务逻辑
	console.log("第一次请求的代码"+data);
	return new Promise((resolve,reject)=>{
	 setTime(()=>{
 		resolve()
		},1000)
	}).then(()=>{ 
	//第二次的业务逻辑
	console.log("第二次请求的代码"); 
	})
}).catch(error=>{
console.log(error); 
})

链式调用 简写过程

1.第一次简写

new Promise((resolve,reject)=>{
//异步操作
 setTime((data)=>{
 //成功的时候调用resolve
// resolve(data)
//错误的时候
reject("error")
},1000)

}).then((data)=>{
	//第一次的业务逻辑
	console.log("第一次请求的代码"+data);
	return new Promise((resolve,reject)=>{
	 setTime(()=>{
 		resolve()
		},1000)
	}).then(()=>{ 
	//第二次的业务逻辑
	console.log("第二次请求的代码"); 
	})
}).catch(error=>{
console.log(error); 
})

2 第二次简写

第三次简写：

异常简写

all使用方法:Promise.all([]).then(()=>{})

应用场景： 两个请求都同时满足的时候，才执行另外一个请求

Promise.all([
	new Promise((resolve,reject)=>{
	//网络请求ajax 在vue里面使用的是axios
	//这里用setTimeout模拟网络请求
	setTimeout(()=>{
		resolve({name:'why',age:18})
	},1000)
	}),
	new Promise(()=>{
		setTimeout(()=>{
		resolve({name:'sun',age:26})
	},1000)
	})
]).then(results=>{
	console.log(results);
})