Promise的初步认识 | 解决回调地狱

首先，我们认识Promise从console.dir(Promise)开始

prototype里面的是原型方法，需要实例

all race reject resolve 是静态方法，直接用

具体是如何用Promise的呢？

new Promise((resolve,reject) => {
			setTimeout(() => {
				console.log('执行Promise')
				resolve('要返回的数据')
			},2000)
		})

这段代码只是new了一个Promise对象，并没有调用到resolve

 我们尝试一下去调用到resolve方法，并打印里面的参数

	<div onclick="promiseClick()">点击我发送异步请求</div>


	<script>
			
		function promiseClick(){
			let p = new Promise((resolve,reject) => {
				setTimeout(() => {
					console.log('123')
					resolve('456')
				},2000)
			});
			return p
		}
		
		promiseClick().then((data) => {
			console.log(data)
		})
		</script>

在 promiseClick这个方法中，返回了一个Promise实例，这个实例中有then方法，then方法就是Promise成功时的回调，也可以写成

	function promiseClick(){
			 return new Promise((resolve,reject) => {
				setTimeout(() => {
					console.log('123')
					resolve('456')
				},2000)
			});
			 
		}
//直接return new Promise 实例 和之前是类似的效果

其实then里面可以写两个回调函数，第一个是成功的回调函数，第二个是失败的回调函数，就像下面这样

	function promiseClick(){
			new Promise((resolve,reject) => {
				setTimeout(() => {
					let num = Math.ceil(Math.random()*20)
					console.log('随机数：',num)
					if(num <= 10) {
						resolve('456')
					}else {
						reject('数字大于10执行失败回调')
					}
				
					
				},2000)
			})
			.then((res1) => {
				console.log(res1)
			},
			(res2) => {
				console.log(res2)
			})
		
			;
		}

 

 除了then这个方法，还有catch方法，他相当于是Promise失败时的回调，和then里面的第二个回调一样，不过他还具有多一些的作用，就是如果then里面出现了异常，会跑去catch

	function promiseClick(){
			new Promise((resolve,reject) => {
				setTimeout(() => {
					let num = Math.ceil(Math.random()*20)
					console.log('随机数：',num)
					if(num <= 10) {
						resolve('456')
					}else {
						reject('数字大于10执行失败回调')
					}
				
					
				},2000)
			})
			.then((res) => {
				console.log(res)
				
			})
			.catch((res) => {
				console.log(res)
			})
			;
		}

Promise中有一个静态方法all

	<script>
			
		function promiseClick(){
			let p = new Promise((resolve,reject) => {
				setTimeout(() => {
					let num = Math.ceil(Math.random()*20)
					console.log('随机数：',num)
					if(num <= 10) {
						resolve('456')
					}else {
						reject('数字大于10执行失败回调')
					}
				
					
				},2000)
			})
			return p
			
		}
		
		function promiseClick2(){
			let p = new Promise((resolve,reject) => {
				setTimeout(() => {
					let num = Math.ceil(Math.random()*20)
					console.log('随机数：',num)
					if(num <= 10) {
						resolve('456')
					}else {
						reject('数字大于10执行失败回调')
					}
				
					
				},2000)
			})
		
		return p
			
		}
		
		function promiseClick3(){
			let p = new Promise((resolve,reject) => {
				setTimeout(() => {
					let num = Math.ceil(Math.random()*20)
					console.log('随机数：',num)
					if(num <= 10) {
						resolve('456')
					}else {
						reject('数字大于10执行失败回调')
					}
				
					
				},2000)
			})
		return p
			
		}
		
		Promise.all([promiseClick(),promiseClick2(),promiseClick3()])
		.then((res) => {
			console.log(res)
		})
		
	
		</script>

Promise.all()里面传一个数组，then：成功了的话就会打印出结果，结果也是数组哦

如果 promiseClick，promiseClick2，promiseClick3有一个走了reject都会报错，得不到最后的数组

其实看到这里仍然不知道promise有什么用，那就继续往下看吧

setTimeout(()=> {
			console.log('我')
			setTimeout(() => {
				console.log('爱')
				setTimeout(() => {
					console.log('大米饭')
				},1000)
			},1000)
		},1000)

 

每隔一秒种，就打印，你觉的这样写好看吗？（嵌套是不是有点多了，这才3层，如果是30层呢？）

现在换Promise试一试

		function getStr(){
			return new Promise((resolve,reject) => {
				setTimeout(() => resolve('我'),1000)
			})
		}
		function getStr2(){
			return new Promise((resolve,reject) => {
				setTimeout(() => resolve('爱'),1000)
			})
		}
		function getStr3(){
			return new Promise((resolve,reject) => {
				setTimeout(() => resolve('大米饭'),1000)
			})
		}
		/* 链式操作 */
		getStr().then((res) => {
			console.log(res)
			return getStr2()
		}).then(res => {
			console.log(res)
			return getStr3()
		}).then(res => {
			console.log(res)
		})

 实现了一样的效果，注意这是链式操作哦，第一个getStr的then，就是成功了来这里，打印一下携带的数据，并且返回了getStr2,代表着去调用getStr2，getStr2成功了就去他的then，在getStr2的then中又返回了了getStr3,虽然代码多了，但是不是好看了一些呢？

最后附上1个案例

	
	/* 
	b依赖a的请求数据 
	 */
		
		function a(){
		      return new Promise(function(res,rej){
		        $.ajax({
		          url:"a接口",
		          type: "GET",
		          async:true,
		          dataType:"json",
		          success:function(data){
		            console.log(data,"a");
		            res(data);
		          }
		        })
		      });
		    }
		    function b(data){
		      console.log(data,"data");
		      return new Promise(function(res,rej){
		        $.ajax({
		            url:"b接口",
		            type: "POST",
		            async:true,
		            data:JSON.stringify(data),
		            dataType:"json",
		            success:function(data){
		              console.log(data,"b");
		              res();
		            }
		          })
		      });
		    }
		    $("#btn").click(function(){
		      a().then(function (data){
		        b(data);
		      }).then(function(){
		      })
		    })

	

后期的话就把axios这个接上