-------------------------------------------------------------------------------------------------------------------------------------
Promise实际是充当ajax获取后台数据后执行回调的异步执行顺序的一个媒介,客观来说就是避免ajax回调地狱(反复嵌套回调),不然代码不够直观
一、Promise对象
Promise对象是异步编程的一种解决方案,它比传统回调式更加强大,Promise内部封装了异步操作和成功失败的回调。
在ES6之前,执行异步操作会有频繁的层次嵌套的同步和异步,执行顺序十分混乱且代码的可读性较差,Promise对象则很好的解决了这些问题。
Promise有三种状态:pending(进行中)、resolved(成功)、rejected(失败)。当异步操作执行后,它得到的结果决定其状态,其他任何的操作都无法改变。Promise状态有两种改变的方式:从Pending(进行中)到resolved(成功), 从pending(进行中)到 rejected (失败)。
首先创建Promise对象,在new Promise()中接收一个函数为参数,函数中的 resolve参数代表执行成功之后的回调函数,reject参数代表执行失败之后的回调函数。
1 //Promise异步
2 let p = new Promise((resolve,reject) => {//两个参数都是回调函数
3 //resolve:执行成功之后的回调函数
4 //reject:执行失败之后的回调函数
5
6 //猛的一顿异步操作之后,根据异步的成功或失败来选择执行相应的函数
7 if(true){ 9 resolve('异步成功');//运行是没有结果的,因为虽然提交到回调函数里面,但是没有调用回调函数
10 }else{12 reject('异步失败');//同上,没有调用reject()函数
13 }
14
15 });
调用回调函数:
方式一:.then() 方法调用resolve()函数, .catch()执行reject()回调函数,根据上面代码返回的函数来选择执行 then() 或者是 catch() 。其中 value 参数代表成功的回调函数返回的参数, fail 参数代表失败的回调函数返回的参数。
//方式一:调用回调函数
//then()方法执行resolve()的回调函数
//catch()方法执行的是reject()的回调函数
p.then(value =>{
console.log(value);//异步成功
}).catch(fail => {
console.log(fail);//异步失败
})
方式二:与上面调用回调函数的效果一样,只是把成功的回调函数和失败的回调函数用逗号隔开。
1 //方式二:调用回调函数 resolve和reject回调函数一起写,用逗号隔开
2 p.then( value =>{
3 console.log(value);//异步成功
4 },fail =>{
5 console.log(fail);//异步失败
6 })
Promise提供了一个 all() 静态方法,可以简化多个实例调用。
代码如下:创建了三个 Promise 实例,将三个实例传入 all()方法的数组中作为元素,调用顺序同样也按照元素的顺序调用,三个Promise实例的回调函数也将组合成数组输出。
1 let p1 = new Promise((resolve,reject) => {
2
3 if(true){
4 console.log('第一个Promise实例');
5 resolve('第一个Promise实例');
6 }else{
7 //省略
8 }
9
10 });
11
12 let p2 = new Promise((resolve,reject) => {
13
14 if(true){
15 console.log('第二个Promise实例');
16 resolve('第二个Promise实例');
17 }else{
18 //省略
19 }
20
21 });
22
23 let p3 = new Promise((resolve,reject) => {
24
25 if(true){
26 console.log('第三个Promise实例');
27 resolve('第三个Promise实例');
28 }else{
29 //省略
30 }
31
32 });
33
34
35 //简化多个实例调用输出排序 all()静态方法
36 let p = Promise.all([p1,p2,p3]);
37
Promise 还提供了一个race() 静态方法,其作用是只输出第一个改变状态的实例。
Promise实例依旧使用上面代码的实例,如果是 p1 实例先执行完则只输出 p1 实例的值。
1 //race()静态方法 :只输出第一个改变状态的实例
2 //人话:三个异步代码块,谁最快就输出谁
3 let p = Promise.race([p1,p2,p3]);
4 p.then(value => {
5 console.log(value);
6 })