es6高级~promise

1.Promise对象

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。其作用是为了解决回调地狱

回调地狱：回调函数的结果作为下一个回调函数的参数时，产生回调链，也称之为回调地狱。

例如：通过请求获取用户ID，再通过ID获取用户名，在通过用户名获取用户年龄

$.ajax({
     type: "GET",
     url: "test.json",
     dataType: "json",
     success: function(data){
       let {id}=data
       $.ajax({
           type: "GET",
           url: "test.json",
           data:{id:id},
           dataType: "json",
           success: function(data){
             let {useName}=data
             $.ajax({
                   type: "GET",
                   url: "test.json",
                   data:{useName:useName},
                   dataType: "json",
                   success: function(data){
                     let {msg}=data
                       }
                );
               }
        );
         }
  );

由于ajax是异步请求，只能等请求获取到数据之后，变量才能被赋值作为下次请求的数据，因此只能放在ajax请求内部在发送请求，此时就构成了回调地狱。

2.Promise的使用

promise是一个构造函数，可以通过new来获取Promise对象

new Promise((resolve,reject)=>{})

 参数是一个回调函数，回调函数有两个参数：

resolve:修改状态为成功的函数

reject：修改状态为拒绝的函数

首先打印promise对象

 promise有两个重要的属性：

state：promise对象的状态

result：promise返回结果

3.promise的状态

promise有三个状态

pending：待执行

fulfilled：已完成

rejected：已拒绝

而修改状态是通过resolve（）和reject（）来修改的

<script>
		var p=new Promise((resolve,reject)=>{
			resolve()
		})
		var p2=new Promise((resolve,reject)=>{
			reject()
		})
		console.log(p);
		console.log(p2);
</script>

注意：promise的状态一旦被改变将无法再进行修改

var p=new Promise((resolve,reject)=>{
	resolve()
	reject()
})

 状态是已完成，在调用reject函数也无法再进行修改。

4.promise的结果

promise的结果主要是通过promise对象参数的回调函数的两个参数的参数决定的

resolve(result):修改状态为已完成，并将promise的结果赋值为result

reject(error):修改状态为已拒绝，并将promise的结果赋值为error

   <script>
	const p= new Promise((resolve, reject) => {
		resolve("成功结果")
	})
	const p2= new Promise((resolve, reject) => {
		reject("失败结果")
	})
	console.log(p);
	console.log(p2);
  </script>

 

 5.promise的then方法

then方法接收两个参数，两个参数都是一个回调函数

• 第一个参数为回调函，表示状态为已完成的时候调用，该回调函数结构resolve函数的参数作为参数
• 第二个参数为回调函数，表示状态为已拒绝的时候调用，该回调函数结构reject函数的参数作为参数

<script>
	const p= new Promise((resolve,reject)=>{
		let a="qq"
		resolve(a)//resolve函数调用相当执行了then方法的第一个参数回调函数
	})
	p.then((res)=>{//res表示的是resolve函数的参数，
		console.log("then成功",res);
	},(error)=>{
		console.log("then失败",error);
	})
</script>

 

<script>
	const p= new Promise((resolve,reject)=>{
		let a="错了"
		reject(a)//reject函数调用相当执行了then方法的第二个参数回调函数
	})
	p.then((res)=>{
		console.log("then成功",res);
	},(error)=>{
		console.log("then失败",error);//res表示的是reject函数的参数，
	})
</script>

 6.then方法的返回值

then方法有一个返回值，返回一个新的promise对象，其状态为一个pending。

<script>
		const p =new Promise((res,rej)=>{
			res(123)
		})
		const t=p.then(res=>{
			return res
		},error=>{
			return error
		})
		const a=t.then(res=>{
			console.log("1",res);
			return res+12
		},error=>{
			console.log('2',error);
		})
		a.then(res=>{
			console.log("ha",res);
		},error=>{
			console.log("ww",error)
		})
</script>

 我们这里可以看到，then方法返回一个新的promise对象，这个新对象的状态为pending。

我们可以在then的回调函数使用return就可以将其状态改成fulfilled，在回调函数内代码出错，状态将会变成rejected。

	<script>
		const p =new Promise((res,rej)=>{
			res(123)
		})
		const t=p.then(res=>{
			console.log(a);	
		},error=>{	
		})
		t.then(res=>{
			console.log("1",res);
		},error=>{
			console.log('2',error);
		})
	</script>

 7.promise的catch方法

catch的执行条件：

• promise的catch方法会在状态为rejected的时候执行
• promise内部代码有问题的时候执行
• promise向外抛出错误的时候执行

	<script>
		const p=new Promise((res,rej)=>{
			rej("500：服务器出错！")
		})
		p.catch(err=>{
			console.log(err);
		})
		const p2=new Promise((res,rej)=>{
			console.log(a);
		})
		p2.catch(err=>{
			console.log("chu",err);
		})
	</script>

所以一般我们都不使用then方法的第二个函数来捕获错误，而是使用catch来不会promise的rejected状态。

这个可以各管各的，代码更加清晰。

8，解决回调地狱

 

<script>
	 const p=new Promise((res,rej)={
		 $.ajax({
			 type: "GET",
			 url: "test.json",
			 dataType: "json",
			 success: function (data) {
				 let { id } = data
				 res(id)
				},
			error:function(error){
				rej(error)
			}
	 })})
	const a= p.then(res=>{
		$.ajax({
			 type: "GET",
			 url: "test.json",
			 dataType: "json",
			 data: { id: res },
			 success: function (data) {
				 let { useName } = data
				return useName
			 },
			 error: function (error) {
				throw new  error("出错了")
			 }
		 })
	 })
	 a.then(res=>{
		 $.ajax({
			 type: "GET",
			 url: "test.json",
			 dataType: "json",
			 data: { useName: res },
			 success: function (data) {
				 let { msg } = data
				console.log("已经获取用户信息");
			 },
			 error: function (error) {
				 throw new error("出错了")
			 }
		 })
	 })
</script>