Promise-Class版

2021-11-25

Promise手写Class版

来吧! 感受一下被Promise支配的恐惧

函数版移步这里

思路都在注释里慢慢看!

Promise:

<script>
    // 三种状态常量
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
// Promise类
class WypPromise {
    constructor(executor) {
        // 判断执行器是否时函数
        if (typeof executor !== 'function') {
            throw new Error('executor is not a funciont')
        }
        // Promise状态
        this.status = PENDING
        this.value = undefined
        this.reason = undefined

        this.fulfilledFns = []
        this.rejectedFns = []

        const resolve = (value) => {
            if (this.status === PENDING) {
                this.status = RESOLVED
                this.value = value
                queueMicrotask(() => {
                    this.fulfilledFns.forEach(fn => fn(this.value))
                })
            }
        }

        const reject = (reason) => {
            if (this.status === PENDING) {
                this.status = REJECTED
                this.reason = reason
                queueMicrotask(() => {
                    this.rejectedFns.forEach(fn => fn(this.reason))
                })
            }
        }

        // 执行 执行器函数
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }

    then(onResolve = value => value, onReject = err => { throw err }) {
        return new WypPromise((resolve, reject) => {
            function handel(fn, data) {
                try {
                    let result = fn(data)
                    // 是promise实例
                    if (result instanceof WypPromise) {
                        result.then(res => {
                            resolve(res)
                        }, reason => {
                            reject(reason)
                        })
                        // 不是promise实例 
                    } else {
                        resolve(result)
                    }
                    // 出错
                } catch (error) {
                    reject(error)
                }
            }
            if (this.status === PENDING) {
                // this.fulfilledFns.push(onResolve)
                // this.rejectedFns.push(onReject)
                // 要在这里拿到上面两个函数的执行结果
                this.fulfilledFns.push(() => {
                    // try {
                    //     let result = onResolve(this.value)
                    //     if (result instanceof WypPromise) {
                    //         result.then(res => {
                    //             resolve(res)
                    //         }, reason => {
                    //             reject(reason)
                    //         })
                    //     } else {
                    //         resolve(result)
                    //     }
                    // } catch (error) {
                    //     reject(error)
                    // }
                    handel(onResolve, this.value)
                })
                this.rejectedFns.push(() => {
                    // try {
                    //     let result = onReject(this.reason)
                    //     if (result instanceof WypPromise) {
                    //         result.then(res => {
                    //             resolve(res)
                    //         }, reason => {
                    //             reject(reason)
                    //         })
                    //     } else {
                    //         resolve(result)
                    //     }
                    // } catch (error) {
                    //     reject(error)
                    // }
                    handel(onReject, this.reason)
                })
            }
            if (this.status === RESOLVED) {
                // try {
                //     let result = onResolve(this.value)
                //     if (result instanceof WypPromise) {
                //         result.then(res => {
                //             resolve(res)
                //         }, reason => {
                //             reject(reason)
                //         })
                //     } else {
                //         resolve(result)
                //     }
                // } catch (error) {
                //     reject(error)
                // }
                queueMicrotask(() => {
                    handel(onResolve, this.value)
                })
            }
            if (this.status === REJECTED) {
                // try {
                //     let result = onReject(this.reason)
                //     if (result instanceof WypPromise) {
                //         result.then(res => {
                //             resolve(res)
                //         }, reason => {
                //             reject(reason)
                //         })
                //     } else {
                //         resolve(result)
                //     }
                // } catch (error) {
                //     reject(error)
                // }
                queueMicrotask(() => {
                    handel(onReject, this.reason)
                })
            }
        })
    }

    catch(onReject) {
        // 为什么添加return？ 你猜猜~
        return this.then(undefined, onReject)
    }

    finally(onFinally) {
        this.then(() => {
            onFinally()
        }, () => {
            onFinally()
        })
    }

    // resolve
    static resolve(value) {
        return new WypPromise((resolve) => resolve(value))
    }

    // reject
    static reject(value) {
        return new WypPromise((resolve, reject) => reject(value))
    }

    // 所有的promise都成功 则成功 有一个失败就失败
    static all(promises) {
        // 记录成功then数量
        let count = 0
        // new一个有初始长度的数组 目的：按顺序储存每一promise的值
        let values = new Array(promises.length)
        return new WypPromise((resolve, reject) => {
            promises.forEach((p, index) => {
                p.then(value => {
                    values[index] = value
                    count++
                    if (count === promises.length) {
                        resolve(values)
                    }
                }, reason => {
                    reject(reason)
                })
            })
        })
    }

    // allSettled方法
    static allSettled(promises) {
        return new Promise((resolve) => {
            const result = []
            promises.forEach(p => {
                p.then(res => {
                    result.push({ status: RESOLVED, val: res })
                    if (result.length === promises.length) {
                        resolve(result)
                    }
                }, err => {
                    result.push({ status: REJECTED, val: err })
                    if (result.length === promises.length) {
                        resolve(result)
                    }
                })
            })
        })
    }

    // 所有的promise中 只要一个promose有结果 就把该promise的结果作为race的结果
    static race(promises) {
        return new WypPromise((resolve, reject) => {
            promises.forEach((p, index) => {
                p.then(res => {
                    resolve(res)
                }, reason => {
                    reject(reason)
                })
            })
        })
    }

    // any只要有一个成功就成功
    static any(promises) {
        let reasons = []
        return new Promise((resolve, reject) => {
            promises.forEach((p, index) => {
                p.then(res => {
                    resolve(res)
                }, err => {
                    reasons.push(err)
                    if (reasons.length === promises.length) {
                        reject(new AggregateError(reasons))
                    }
                })
            })
        })
    }
}

test:

// test1
// var a = new WypPromise((resolve, reject) => {
//     resolve(1)
//     // reject(2)
// })
// a.then(res => {
//     console.log(res);
// }, err => {
//     console.log(err);
// })

// test2
// var a = new WypPromise((resolve, reject) => {
//     setTimeout(() => {
//         resolve(1)
//         // reject(2)
//     }, 1000);
// })
// a.then(res => {
//     console.log(res);
// }, err => {
//     console.log(err);
// })

// test3
// var a = new WypPromise((resolve, reject) => {
//     console.log('pending~');
//     // resolve(1)
//     setTimeout(() => {
//         resolve(2)
//         // reject(3)
//     }, 1000);
//     // console.log('fulfilled~');
//     // reject(4)
// })
// a.then(res => {
//     console.log(res);
//     // return 'aaa'
//     // throw new Error('aaaa')
// }, err => {
//     console.log(err);
//     return 'bbb'
// }).then(res => {
//     console.log(res);
// }, err => {
//     console.log(err);
// })

// test4 返回值是Promise
// var p = new WypPromise((resolve, reject) => {
//     // setTimeout(() => {
//     resolve(1)
//     // }, 1000);
// })
// p.then(res => {
//     console.log(res);
//     return new WypPromise((resolve, reject) => {
//         reject(2)
//     })
// }, err => {
//     console.log(err);
// }).then(res => {
//     console.log(res);
// }, err => {
//     console.log(err);
// })

// test5
// var p = new WypPromise((resolve, reject) => {
//     // setTimeout(() => {
//     resolve(1)
//     // }, 1000);
// })
// p.then(res => {
//     console.log(res);
//     return new WypPromise((resolve, reject) => {
//         // resolve(1)
//         reject(2)
//     })
// }, err => {
//     console.log(err);
// })
//     // .then(res => {
//     //     console.log(res);
//     // }, err => {
//     //     console.log(err);
//     // })
//     .catch(error => {
//         console.log('------------');
//         console.log(error);
//     })
// .then(null, err => {
//     console.log(err);
// })

// test6
// var p = new WypPromise((resolve, reject) => {
//     resolve(1)
// })
// var p1 = new WypPromise((resolve, reject) => {
//     resolve(1)
// })
// var p2 = new WypPromise((resolve, reject) => {
//     resolve(1)
// })
// var p3 = new WypPromise((resolve, reject) => {
//     reject(2)
// })

// WypPromise.all([p, p1, p2, p3]).then(res => {
//     console.log(res);
// }, err => {
//     console.log(err);
// })

// test7 rece测试
// var p = new WypPromise((resolve, reject) => {
//     // resolve(1)
// })
// var p1 = new WypPromise((resolve, reject) => {
//     resolve(1)
// })
// var p2 = new WypPromise((resolve, reject) => {
//     // resolve(1)
// })
// var p3 = new WypPromise((resolve, reject) => {
//     reject(2)
// })

// WypPromise.race([p, p1, p2, p3]).then(res => {
//     console.log(res);
// }, err => {
//     console.log(err);
// })

// test8 当p.then() 只有一个参数的时候 要给then函数一个默认值 抛出一个错误 此错误会传递给下一个promise的catch()里面
// var p = new WypPromise((resolve, reject) => {
//     reject(222)
// })
// p.then(res => {
//     console.log(res);
// }).catch(err => {
//     console.log(err);
// })

// test9  finally
// var p = new WypPromise((resolve, reject) => {
//     resolve(1)
// })
// p.then(res => {
//     console.log(res);
// }).catch(err => {
//     console.log(err);
// }).finally(() => {
//     console.log('fff');
// })

// tese10 any方法
// var p1 = new WypPromise((resolve, reject) => {
//     setTimeout(() => {
//         resolve(1)
//     }, 2000);
// })
// var p2 = new WypPromise((resolve, reject) => {
//     setTimeout(() => {
//         // reject(2)
//         resolve(2)
//     }, 2000);
// })
// var p3 = new WypPromise((resolve, reject) => {
//     setTimeout(() => {
//         reject(3)
//     }, 2000);
// })
// WypPromise.any([p1,p2,p3]).then(res => {
//     console.log(res);
// }, err => {
//     console.log(err.message);
// })

我就问你,看完了吗? 害怕不~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~