JS手写Promise代码ES6方式实现

╰+攻爆jí腚メ 2022-12-26 04:50 162阅读 0赞

> 本篇只简单实现Promise，不包含链式调用等。若想详细了解请[参考链接][Link 1]，由于Promise实现采用了发布订阅模式，所以想要了解原理的可以参考[观察者模式和发布订阅模式的区别][Link 2]

### 代码实现 ###

const STATUS = { 
        PENDING: 'pending',
        FULFILLED: 'fulFilled',
        REJECTED: 'rejected'
    }
    
    class MyPromise { 
        constructor(executor) { 
            this.status = STATUS.PENDING    // 状态值
            this.value = undefined          // 成功返回值
            this.reason = undefined         // 失败返回值
            this.onFulFilledCallbacks = []  // 成功回调执行队列----up
            this.onRejectedCallbacks = []   // 失败回调执行队列----up
    
            // 成功
            const resolve = (val) => { 
                // PENDING用来屏蔽的，resolve和reject只能调用一个，不能同时调用
                if (this.status === STATUS.PENDING) { 
                    this.status = STATUS.FULFILLED
                    this.value = val
                    this.onFulFilledCallbacks.forEach(fn => fn())   // ----up
                }
            }
            // 是失败
            const reject = (reason) => { 
                if (this.status === STATUS.PENDING) { 
                    this.status = STATUS.REJECTED
                    this.reason = reason
                    this.onRejectedCallbacks.forEach(fn => fn())   // ----up
                }
            }
    
            try { 
                executor(resolve, reject)
            } catch (e) { 
                reject(e)
            }
        }
    
        then(onFullFilled, onRejected) { 
            // 同步调用判断
            if (this.status === STATUS.FULFILLED) { 
                onFullFilled(this.value)
            }
            if (this.status === STATUS.REJECTED) { 
                onRejected(this.reason)
            }
            // 异步调用判断 ----up
            if (this.status === STATUS.PENDING) { 
                this.onFulFilledCallbacks.push(() => { 
                    onFullFilled(this.value)
                })
                this.onRejectedCallbacks.push(() => { 
                    onRejected(this.reason)
                })
            }
        }
    }
    
    // const p = new MyPromise((resolve, reject) => { 
    // // resolve('success') // 走了成功就不会走失败了
    // // throw new Error('失败') // 失败了就走resolve
    // // reject('failed') // 走了失败就不会走成功
    // resolve('成功！')
    // })
    // p.then((res) => { 
    // console.log(res)
    // }, (err) => { 
    // console.log(err)
    // })
    
    const p = new MyPromise((resolve, reject) => { 
        setTimeout(function() { 
            resolve('success')
        }, 1000)
    })
    p.then((res) => { 
        console.log(res)
    }, (err) => { 
        console.log(err)
    })

[Link 1]: https://www.cnblogs.com/xinggood/p/11836096.html
[Link 2]: https://www.jianshu.com/p/594f018b68e7