-------------------------------------------------------------------------------------------------------------------------------------

        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 })