9.then方法参数变成可选参数

28 阅读1分钟
// then方法参数变成可选参数

// 原promise演示
var promise = new Promise((resolve, reject) => {
    resolve(100)
})

promise
    .then() // 虽然then没有写明任何回调参数,但value可以自动依次传递下去
    .then()
    .then(value => {
        console.log(value)
    })

// 自己实现
const PENDING = 'pending'
const FUFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    constructor (executor) {
        try {
            executor(this.resolve, this.reject)
        } catch (error) {
            this.reject(error)
        }
    }
    status = PENDING
    value = undefined
    reason = undefined
    successCallback = []
    failCallback = []

    resolve = value => {
        if (this.status !== PENDING) return
        this.status = FUFILLED
        this.value = value
        while(this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        if (this.status !== PENDING) return
        this.status = REJECTED
        this.reason = reason
        while(this.failCallback.length) this.failCallback.shift()()
    }
    then(successCallback, failCallback) {
        // 处理then可选传参,不传的情况直接把原有方法和值向下传递
        successCallback = successCallback || (value => value)
        failCallback = failCallback || (reason => { throw reason })
        const promise2 = new MyPromise((resolve, reject) => {
            if (this.status === FUFILLED) {
                setTimeout(() => {
                    try {
                        const successValue = successCallback(this.value)
                        resolvePromise(promise2, successValue, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            } else if (this.status === REJECTED) {
                setTimeout(() => {
                    try {
                        const failReason = failCallback(this.reason)
                        resolvePromise(promise2, failReason, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            } else {
                this.successCallback.push(() => {
                    setTimeout(() => {
                        try {
                            const successValue = successCallback(this.value)
                            resolvePromise(promise2, successValue, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                })
                this.failCallback.push(() => {
                    setTimeout(() => {
                        try {
                            const failReason = failCallback(this.reason)
                            resolvePromise(promise2, failReason, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                })
            }
        })
        return promise2
    }
}
function resolvePromise(promise2, resValue, resolve, reject) {
    if (resValue === promise2) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (resValue instanceof MyPromise) {
        resValue.then(value => resolve(value), reason => reject(reason))
    } else {
        resolve(resValue)
    }
}

// 验证
const mypromise =  new MyPromise((resolve, reject) => {
    // resolve('成功')
    reject('失败')
})

mypromise
    .then()
    .then()
    .then(
        value => {
            console.log(value)
        },
        reason => {
            console.log(reason)
        }
    )