面试遇见了手写Promise, 记录一下

class PromiseV2 {
    
    

    static PENDING = 'pending'
    static FULFILLED = 'fulfilled'
    static REJECTED = 'rejected'

    // 构造器， 会在类被创建的时候自动执行
    constructor(exector) {
    
    
        //设置初始化状态
        this.value = null
        this.status = PromiseV2.PENDING
        // 没有立即执行的回掉函数， 被压进这个数组中
        this.callbacks = []
        try {
    
    
            exector(this.resolve.bind(this), this.reject.bind(this))
        } catch (err) {
    
    
            this.reject(err)
        }
    }

//    两个类方法
    resolve(value) {
    
    
        // 给个判断，如果不是pending状态， 就不改变状态。 保证状态一旦改变，就不进行修改了。
        if (this.status === PromiseV2.PENDING) {
    
    
            setTimeout(() => {
    
    
                this.value = value
                this.status = PromiseV2.FULFILLED
                this.callbacks.map(callback => {
    
    
                    callback.onFulfilled(value)
                })
            })
        }
    }

    reject(reason) {
    
    
        if (this.status === PromiseV2.PENDING) {
    
    
            setTimeout(() => {
    
    
                this.value = reason
                this.status = PromiseV2.REJECTED
                this.callbacks.map(callback => {
    
    
                    callback.onRejected(reason)
                })
            })
        }
    }

    then(onFulfilled, onRejected) {
    
    
        console.log(onFulfilled)
        // 里面的三种状态和下面的两个方法是相关联的
        if (typeof onFulfilled !== 'function') {
    
    
            // onFulfilled 定义为一个直接返回参数的函数
            onFulfilled = value => value
        }
        if (typeof onRejected !== 'function') {
    
    
            onRejected = reason => reason
        }

        // 因为then是链式回调的， 所以，then 应该也返回的是一个Promise
        return new PromiseV2((resolve, reject) => {
    
    
            // 如果是回调， 那么就直接压进去， 等着后来拿出来执行
            if (this.status === PromiseV2.PENDING) {
    
    
                this.callbacks.push({
    
    
                    onFulfilled: data => {
    
    
                        this.parse(onFulfilled(this.value), resolve, reject)
                    },
                    onRejected: err => {
    
    
                        this.parse(onRejected(this.value), resolve, reject)
                    }
                })
            }

            //    如果是fulfilled， 直接onFulfilled
            //    其实这里就相当于使用了， if(onFulfilled)
            if (this.status === PromiseV2.FULFILLED) {
    
    
                setTimeout(() => {
    
    
                    this.parse(onFulfilled(this.value), resolve, reject)
                })
            }
            //    如果是rejected 直接onRejected
            //    其实这里就相当于使用了， if(onRejected)
            if (this.status === PromiseV2.REJECTED) {
    
    
                setTimeout(() => {
    
    
                    this.parse(onRejected(this.value), resolve, reject)
                })
            }
        })
    }

    // parse类函数， 抽离相同的函数部分
    parse(result, resolve, reject) {
    
    
        try {
    
    
            if (result instanceof PromiseV2) {
    
    
                result.then(resolve, reject)
            } else {
    
    
                resolve(result)
            }
        } catch (err) {
    
    
            reject(err)
        }
    }
}

参考链接后盾人向军老师的教程