promise的原理和几种使用方法

  1. promise概念

    Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果,其实是一个构造函数,自己身上有all、reject、resolve,race这几个方法,原型上有then、catch,finally等方法。promise有三种状态: pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。

  2. promise.prototytype.then():promise实例状态改变的回调函数,有两个参数:第一个是成功回调函数,第二个是失败回调函数。他会返回一个全新的promise,因此可以继续then链式调用。

  3. promise.prototype.catch():失败回调函数,状态变为rejected执行。相当于promise. prototytype.then(null/undifined,rejection),如果promise内发生了错误,但却没有定义catch(),这时运行到这一行代码会报错,但是不会影响到promise后面代码的执行

promise的几种方法:

1.基础用法:

new Promise((resolve, reject) => {
        // resolve 成功的回调
        // reject  失败的回调
        // 成功或者失败只能存在一种状态,不能同事执行两个状态
        resolve('成功')
        reject('失败')
        // then 是获取Promise的resolve, reject状态
    }).then(res => {
        // 成功
        console.log(res);
    }, error => {
        // 失败
        console.log(error);
    })

2.promise.finally():promise实例无论状态是什么都会执行的函数,finally不接受任何参数。

 const p1 = function () {
            return new Promise((resolve, reject) =>{
                // 失败时
                // reject("失败了")
                //  resolve(2);
                // 成功时
                resolve(2)
                reject("失败了")
            });
        };
        p1().then(res=> {
            console.log(res);
        }).catch(error=>{
            console.log(error);
        }).finally(()=>{
            console.log('无论失败或者成功都会走这个函数');
        })

3.promise.all():将多个promise实例包装成一个新的promise实例

const p1 = function () {
                    return new Promise((resolve, reject)=>{
                        resolve(1);
                    });
                };
                const p2 = function () {
                    return new Promise((resolve, reject)=>{
                        resolve(2);
                    });
                };
                const p3 = function () {
                    return new Promise((resolve, reject)=>{
                        // reject("失败了")
                        resolve(3);
                    });
                };

                // Promise.all 所有封装的Promise都成功才会成功,只要有一个失败就会失败
                let result = Promise.all([p1(), p2(), p3()]).then(results=>{
                    console.log(results);//[1, 2, 3]
                }).catch(error=>{
                    console.log(err);
                    // 当p3的reject("失败了")被解开时控制台会打印失败了
                })


              

4.promise.race():

// race()  把多个封装的promise 组合起来,看谁跑的快
        const p1 = function () {
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve(1);
                }, 500)

            });
        };
        const p2 = function () {
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve(2);
                }, 400)
            });
        };
        const p3 = function () {
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve(3);
                }, 600)
            });
        };
        //谁先执行完成就先执行回调,其余的将不会再进入race的任何回调,其余的没有停止,自行执行
        let result = Promise.race([p1(), p2(), p3()]).then(results=>{
            console.log(results);
        }).catch(error=>{
            console.log(error);
        })





5.promise.any():

 // 1. 只要有一个实例变成fulfilled,他就会变成fulfilled
        // 2. 只有全部实例状态都变成rejected,它才会变成rejected
  const p1 = function () {
            return new Promise((resolve, reject)=>{  
                resolve(5);
            });
        };
        const p2 = function () {
            return new Promise((resolve, reject)=>{
                reject(2);
            });
        };
        const p3 = function () {
            return new Promise((resolve, reject)=>{ 
                resolve(3);
            });
        };

        let result = Promise.any([p1(), p2(), p3()]).then(results=>{
            console.log(results);
            // 5 因为p1成功了,只返回找到的第一个成功的,遇到reject会继续向下寻找
        }).catch(error=>{
            console.log(error);
            // 当三个return返回的都是reject时,控制台打印AggregateError: All promises were rejected
        })

6.promise.allSettled():等所有实例都返回结果,他的状态就只会变成fulfilled

const p1 = function () {
        return new Promise((resolve, reject) => {
            resolve(1);
        });
    };
    const p2 = function () {
        return new Promise((resolve, reject) => {
            resolve(2);
        });
    };
    const p3 = function () {
        return new Promise((resolve, reject) => {
            reject(3);
        });
    };

    // Promise.allSettled无论成功或者失败会把所有的状态返回给results
    // 没有catch
    let result = Promise.allSettled([p1(), p2(), p3()]).then(results => {
        console.log(results);
    })

  • 4
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值