Promise 方法实现

本文详细介绍了Promise类的核心逻辑实现,包括其状态管理、resolve和reject函数、then方法的链式调用以及错误处理。通过实例展示了如何创建和使用Promise来处理异步操作,同时提到了Promise.all静态方法的实现。此外,还涵盖了状态转换规则和值的处理,确保了状态的一次性和回调函数的正确执行。
摘要由CSDN通过智能技术生成

1、promise 类核心逻辑实现

        promise 就是一个类 在执行这个类的时候 需要传递一个执行器会立即执行 执行器会立即执

2、promise 中有三种状态 分别为 成功 fulfilled 失败 reject 等待 pending

        pending ->fulfilled  //等待转变为成功

        pending ->rejected   //等待转变为失败

        一旦状态确定就不可更改

3、resolve 和 reject 函数是用来更改状态

            resolve:fulfilled

            reject:rejected

4、then方法 内部做的事情就判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用的失败的回调函数 then方法是被定义在原型对象上中的

5、then成功回调有一个参数 表示成功之后的值 then失败回调有一个参数 表示失败后的原因

const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled'; //成功
const REJECTED = 'reject' ;   //失败

class MyPromise {
    constructor(executor) {    //executor 执行器
        try {
            executor(this.resolve,  this.reject);
        }catch(e) {
            this.reject(e)
        }
        
    }
    //promise 状态
    status = PENDING;
    //成功之后的值
    value = undefined;
    //失败后的原因
    reason = undefined;
    //成功回到
    successCallback = [];
    //失败回调
    failCallback = [];
    resolve = value => {
        //如果状态不是等待 阻止程序向下执行
        if(this.status !== PENDING) return;
        //将状态更改为成功
        this.status = FULFILLED;
        //保存成功之后的值
        this.value = value;
        //判断成功回调是否存在 如果存在 就调用
        // this.successCallback && this.successCallback(this.value )
        while(this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        //如果状态不是等待 阻止程序向下执行
        if(this.status !== PENDING) return;
        // 将状态更改为失败
        this.status = REJECTED;
        //保存失败后的原因
        this.reason = reason;
        //判断失败回调是否存在 如果存在 就调用
        // this.failCallback && this.failCallback(this.reason);
        while(this.failCallback.length) this.failCallback.shift()()
    }
    then(successCallback, failCallback) {
        // 这里进行判断,如果有回调就选择回调,如果没有回调就传一个函数,把参数传递
        successCallback = successCallback ? successCallback : value => value
        failCallback = failCallback ? failCallback : reason =>{throw reason }
        //then方法的链式调用,每个then方法都要返回 promise 对象,当调用 传入的resolve方法,把x作为形参传入,得到的就是下一个then方法传入的参数value
        let promise2 = new MyPromise((resolve, reject)=>{
            //判断状态
            if(this.status === FULFILLED) {
                setTimeout(() => {
                    try {
                        let x = successCallback(this.value);
                        //判断x的值是普通值还是promise对象
                        //如果是普通值 直接调用resolve
                        //如果是promise对象 查看promise 对象返回的结果
                        //再根据promise 对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject);
                    } catch(e) {
                        reject(e);
                    }
                },0)
            } else if (this.status === REJECTED) {
                setTimeout(() => {
                    try {
                        let x = failCallback(this.reason);
                        //判断x的值是普通值还是promise对象
                        //如果是普通值 直接调用resolve
                        //如果是promise对象 查看promise 对象返回的结果
                        //再根据promise 对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject);
                    } catch(e) {
                        reject(e);
                    }
                },0)
            } else {
                //等待
                //将成功回调函数和失败回调函数储存起来
                this.successCallback.push(()=>{
                    setTimeout(() => {
                        try {
                            let x = successCallback(this.value);
                            //判断x的值是普通值还是promise对象
                            //如果是普通值 直接调用resolve
                            //如果是promise对象 查看promise 对象返回的结果
                            //再根据promise 对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject);
                        } catch(e) {
                            reject(e);
                        }
                    },0)
                });
                this.failCallback.push(()=>{
                    setTimeout(() => {
                        try {
                            let x = failCallback(this.reason);
                            //判断x的值是普通值还是promise对象
                            //如果是普通值 直接调用resolve
                            //如果是promise对象 查看promise 对象返回的结果
                            //再根据promise 对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject);
                        } catch(e) {
                            reject(e);
                        }
                    },0)
                });
            }
        })
        return promise2;
    }

    finally (callback) {
        return this.then(value =>{
            return MyPromise.resolve(callback()).then(()=>value);
        }, () => {
            return MyPromise.resolve(callback().then(reason=>{throw reason}))
        })
    }

    catch(failCallback) {
        return this.then(undefined, failCallback)
    }

    //Promise.all 方法的实现 静态方法
    static all (array) {
        let result = [];
        let index = 0;
        return new MyPromise((resolve, reject)=>{
            function addData(key, value) {
                result[key] = value;
                index++;
                if(index === array.length) {
                    resolve(result);
                }
            }
            for (let i in array) {
                let current = array[i];
                if(current instanceof MyPromise) {
                    //promise 对象
                    current.then(value => addData(i, value),reason=>reject(reason))
                } else {
                    //普通值
                    addData(i,array[i]);
                }
            }
        })
    }
    
    static resolve(value) {
        if(value instanceof MyPromise) return value;
        return new MyPromise(resolve => resolve(value))
    }

}

function resolvePromise (promise2, x, resolve, reject) {
    if(promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if(x instanceof MyPromise) {
        //promise 对象
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值