技术饭

ES6的promise的介绍

copylian    0 评论    1793 浏览    2020.06.03

image.png

一.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

飓风呀
感谢你的支持,我会继续努力!
扫码打赏,感谢您的支持!
ES6 promise ajax 

文明上网理性发言!

  • 还没有评论,沙发等你来抢