ES6的promise的介绍

一．Promise 介绍

1.Promise：即异步通信编程的一种解决方案，它比传统回调式更加的强大；

2.ES6 之前非常多层次嵌套的同步、异步，执行顺序混乱且不好维护；

3. Promise 就很好的解决了这些问题，我们先了解一下它的语法：

//创建一个 Promise 实例

let  p  =  new  Promise((resolve,  reject)  =>  {

        //然后判断成功或失败去执行 resolve 或 reject

        if  (false)  {

                //console.log('异步通信执行成功！'); resolve('执行成功！');

        }  else  {

                //console.log('异步通信执行失败！'); reject('执行失败！');

        }

});

//then 方法可执行 resolve 的回调函数

//catch 方法可执行 reject 的回调函数

p.then((value)  =>  {

        console.log(value);

}).catch((reason)  =>  {

        console.log(reason);

});

PS：如果你有过很多层异步通信实战基础，上面提供的方法会突然感觉清晰很多； PS：因为它把多层嵌套的回调函数给分离出来，通过 then 和catch 来实现；

4. 通过上面例子的语法，我们发现 p 作为 Promise 实例，可以进行连缀链式操作；

5.当执行了 then 方法后，本身依旧返回了当前的 Promise 实例，方便链式；

6.注释中也说明了，通过构造方法的两个参数去执行回调函数，并传递参数；

7.事实上，catch()方法还可以作为 then 第二参数进行存在，方便多层回调；

//一体化操作

p.then((value)  =>  {

        console.log(value);

}, (reason) => {

        console.log(reason);

});

二．实例测试

1.我们做个模拟多层异步通信的实例测试，要异步多个内容，并按指定顺序执行；

2.先给出不进行 Promise 异步，看它执行的顺序：

//模拟异步 1

setTimeout(()  =>  {

        console.log('1.返回异步通信');

},  3500);

//模拟异步 2

setTimeout(()  =>  {

        console.log('2.返回异步通信');

},  800);

//模拟异步 3

setTimeout(()  =>  {

        console.log('3.返回异步通信');

},  1500);

PS：这里不管你怎么调节，最终输出结果总是：2，3，1。需求顺序要：1，2，3；

3.将上面模拟异步通信，通过 Promise 进行改装，再看看执行结果；

let  p1  =  new  Promise((resolve,  reject)  =>  {

        //模拟异步 1

        setTimeout(()  =>  {

                //console.log('1.异步通信'); resolve('1.返回异步通信');

        },  3500);

});

let  p2  =  new  Promise((resolve,  reject)  =>  {

//模拟异步 2

setTimeout(()  =>  {

        //console.log('2.异步通信'); resolve('2.返回异步通信');

        },  800);

});

let  p3  =  new  Promise((resolve,  reject)  =>  {

//模拟异步 3

setTimeout(()  =>  {

        //console.log('3.异步通信'); resolve('3.返回异步通信');

},  1500);

//执行回调

p1.then((value)  =>  { 

        console.log(value); return  p2;

}).then((value)  =>  { 

        console.log(value); return  p3;

}).then((value)  =>  {

        console.log(value);

});

Promise状态特点

三．状态特点

1.Promise解决了异步多层回调混乱，且执行顺序的问题；

2. Promise对象异步操作的三种状态：

(1)  .Pending(进行中)

(2)  .Fulfilled(已成功)

(3)  .Rejected(已失败)

3.当异步操作执行后，它得到的结果来决定其状态，其它任何操作都无法改变；

4.Promise状态只有两种运行方式：从  Pending到  Fulfilled或 Rejected；

5.而当状态已经固定后，此时就变成    Resolved(已完成)。关键字详解：请搜索；

pending ->   resolve方法  -> fulfilled -> resolved

pending ->   reject方法  -> rejected -> resolved

PS：测试当前状态，在浏览器环境下比较直观直接：console.log(p1)，在不同阶段执行；

四．更多方法

1.上一节课，我们使用了三组    Promise实例完成三段异步的排序输出问题；

2.Promise提供了一个  all()方法，可以简化多个实例调用输出排序；

//p1,p2,p3   是三个 Promise  实例，数组元素顺序即输出顺序

let  p  =  Promise.all([p1,   p2,  p3]);

//将三个 Promise 实例的回调组合成数组输出

p.then(value  =>  {

        console.log(value);

});

PS：虽然 p1,p2,p3都是异步操作，但最终要等待所有异步完成，才可以输出；

PS：只要 p1,p2,p3中有一个出现了 Rejected，则会执行失败回调；

3.   Promise提供了一个  race()方法，只输出第一个改变状态的实例；

//p1,p2,p3    只要有一个改变状态，即回调

let  p  =  Promise.race([p1,   p2,  p3]);

//所以，这里只输出  p2

p.then(value  =>  {

        console.log(value);

});

4.   Promise提供了  resolve()和 reject()，直接返回一个成功或失败的实例；

//直接返回成功或失败的 Promise 实例

let  ps  =  Promise.resolve('成功');

let  pj  =  Promise.reject('失败');

ps.then(value  =>  {

        console.log(value);

        return  pj;

}).catch(reason  =>  {

        console.log(reason);

})

//等价于

new  Promise(resolve  =>  resolve('成功'));

//最常用的场景，类型一致性

function  getP()  {

        if  (false)  {

                return  new  Promise(resolve  => {

                        resolve('异步成功');

                })

        }  else  {

                return  0;

                //强制类型一致保证程序正确性 Promise.resolve(0)

        }

}

getP().then(value  =>  {

        console.log(value);

});

链接：https://pan.baidu.com/s/1B5RrcFxI3RU7caDK207Uzw 

提取码：giif