手写Promise?不是有手就行吗

125 阅读1分钟

构造函数

 constructor(exec) {
        this.state = "pending"//对象状态值pending、fulfilled、rejected
        let resolve = value => {
            setTimeout(() => {//利用宏任务setTimeout等待then方法中callBack的声明
                if (this.state === "pending") {
                    this.state = "fulfilled"
                    typeof this.callBackResolve === "function" ? this.callBackResolve(value) : 0
                }
            }, 0)
        }
        let reject = reason => {
            setTimeout(() => {
                if (this.state === "pending") {
                    this.state = "rejected"
                    typeof this.callBackReject === "function" ? this.callBackReject(reason) : 0
                }
            }, 0);
        }
        if (typeof exec === "function")
            try {//捕获异常
                exec(resolve, reject)
            } catch (error) {
                reject(error)
            }
    }

then方法实现

/**
     * 
     * @param {*} fulfilled 
     * @param {*} rejected 
     * @returns 
     */
    then(fulfilled, rejected) {
        return new myPromise((resolve, reject) => {//调用then函数时声明callBack方法
            let result;//存储resolve或reject函数的返回值
            this.callBackResolve = value => {//
                try {//捕获then方法回调函数fulfilled中的异常
                    result = fulfilled(value)
                } catch (error) {
                    reject(error)
                }
                this.isMypromise(result, resolve, reject)
            }
            this.callBackReject = reason => {
                try {
                    result = rejected(reason)
                } catch (error) {
                    reject(error)
                }
                this.isMypromise(result, resolve, reject)
            }
        })
    }

自定义isMypromise方法

    /**
     * 判断then中两个回调函数的返回值是否为promise
     * @param {*} result 
     * @param {*} resolve 
     * @param {*} reject 
     */
    isMypromise(result, resolve, reject) {
        if (result instanceof myPromise)
            result.then(value => {
                resolve(value)
            }, reason => {
                reject(reason)
            })
        else
            resolve(result)
    }

调试

const delay = time => new myPromise((resolve, reject) => {
    setTimeout(()=>{
        resolve(time)
    },time)
})
delay(100).then(value=>{
    console.log(value+"ms");
    return delay(value+50)
}).then(value=>{
    console.log(value+"ms");
})

输出

100ms
150ms