Promise

什么是promise

• promise是异步编程的一种解决方案
• promise主要用于解决网络请求所产生的回调地狱
• 一般情况下是有异步操作的时候，使用promise对这个异步操作进行封装

链式编程

promise对象的参数是一个回调函数，这个回调函数又有两个参数 分别是resolve（解决即表示请求成功），reject(拒绝表示请求失败)，并且resolve与reject又是两个函数，reslove表示异步请求成功调用，reject表示异步请求失败的时候调用
回调函数中写异步请求的代码，当异步请求成功，调用reslove函数 ，就可以将请求成功的代码写在then函数中
模拟多次请求回调 ，将这种使用then方法进多次回调的编程方式称为链式编程

new Promise((resolve,reject)=>{
	 // 第一次发送异步请求的代码
	 setTimeout(()=>{
		 // 请求成功调用resolve函数
		 resolve();
	 },1000) 
 }).then(()=>{
	 // 在then函数中写请求成功的代码
	 console.log("hello world")
	 console.log("hello world")
	 console.log("hello world")
	 //如果要发送第二次异步请求，则再次创建一个promise对象
	 return new Promise((resolve,reject)=>{
		  // 第二次发送异步请求
		 setTimeout(()=>{
			 // 请求成功调用
		 		 resolve();
		 },1000) 
	 })
	 
 }).then(()=>{
	 // 请求成功调用then函数，then函数中写请求成功执行的代码
	 console.log("hello yaya");
	  console.log("hello yaya");
	   console.log("hello yaya");
	   return new Promise((resolve,reject)=>{
		   // 第三次发送异步请求
		  setTimeout(()=>{
		  		 resolve();
		  },1000) 
	   })
 }).then(()=>{
	 console.log("hellll 11111111")
 })

模拟异步请求成功

new Promise((resolve,reject)=>{
  //异步请求代码
	 setTimeout(()=>{
	 //请求成功调用resolve函数，可以传入参数
		 resolve("hello world");
	 },1000) 
 }).then(data=>{
   //异步请求成功后执行的代码
	 console.log(data);
 })

模拟异步请求失败
调用reject函数后，就可以将请求失败的代码写在catch函数中

new Promise((resolve,reject)=>{
	 setTimeout(()=>{
		 reject("error")
	 },1000) 
 }).then(data=>{
	 console.log(data);
 }).catch(err=>{
	 console.log(err)
 })

promise的三种状态

首先，当我们开发种有异步操作的时候，就可以给异步操作包装一个promise,异步操作之后会有三种状态

• pending:等待状态，比如正在进行网络请求，或者定时器没有到时间
• fulfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调then()
• reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调catch（）

另外一种书写方式，在then这里既写请求成功指向的回调函数，也写请求失败执行的函数

 new Promise((resolve,reject)=>{
  	 setTimeout(()=>{
  		 reject("error")
  	 },1000) 
   }).then(data=>{
	   console.log(data)
   },err=>{
	   console.log(err);
   })

promise链式调用

当我们只是需要对结果进行一些处理的时候，并不需要发送异步请求的时候，每次都创建一个promise会很麻烦，如下

new Promise(resolve=>{
	 setTimeout(()=>{
		 resolve("aaa");
	 },1000)
 }).then(res=>{
	 console.log(res);
	 // 第结果进行第一次处理
	 return new Promise(resolve=>{
		 resolve(res+"111");
	 })
 }).then(res=>{
	 console.log(res);
	 // 对结果进行第二次处理
	 return new Promise(resolve=>{
		 resolve(res+"222")
	 })
 }).then(res=>{
	 console.log(res)
 })

以上方式第一种的简写（promise中的参数可以进行省略）

new Promise(resolve=>{
	 setTimeout(()=>{
		 resolve("aaa");
	 },1000)
 }).then(res=>{
	 console.log(res);
	 // 第结果进行第一次处理
	 return Promise.resolve(res+"111");
	 
 }).then(res=>{
	 console.log(res);
	 // 对结果进行第二次处理
	 return Promise.resolve(res+"222")
 
 }).then(res=>{
	 console.log(res)
 })

以上方式第二种的简写

new Promise(resolve=>{
	 setTimeout(()=>{
		 resolve("aaa");
	 },1000)
 }).then(res=>{
	 console.log(res);
	 // 第结果进行第一次处理
	 return  res+"111";
	 
 }).then(res=>{
	 console.log(res);
	 // 对结果进行第二次处理
	 return res+"222";
 
 }).then(res=>{
	 console.log(res)
 })

当请求失败的时候，也可以通过throw也抛出失败的结果

 new Promise(resolve=>{
	 setTimeout(()=>{
		 resolve("aaa");
	 },1000)
 }).then(res=>{
	 console.log(res);
	 // 第结果进行第一次处理
	 return  res+"111";
	 
 }).then(res=>{
	 console.log(res);
	 // 对结果进行第二次处理
	 throw "error"
 
 }).then(res=>{
	 console.log(res)
 }).catch(err=>{
	 console.log(err);
 })

promise对象的all方法

模拟当两次异步请求都发送成功的，才可以达到我们需求的案列需要使用到promise的all方法

	Promise.all([ new Promise((resolve,reject)=>{
	 setTimeout(()=>{
		 resolve({name:"loawang",age:"20"})
	 },1000)
 }), new Promise((resolve,reject)=>{
	 setTimeout(()=>{
		 resolve({name:"zhangsan",age:"10"})
	 },2000)
 })]).then(results=>{
	 console.log(results)
 })