Promise的封装二

2021-10-26

Promise的封装二

优化一:把几个状态转为const常量,避免书写错误

const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

优化二:添加检测是否是函数如果不是函数,直接抛出错误

//检测传入的是否是一个函数 如果不是 直接抛出一个错误
if (typeof executor !== 'function') {
    throw new TypeError(`Promise resolver ${executor} is not a function`)
}

优化三: 链式调用,原型的then函数要返回一个Promise

Promise.prototype.then = function() {
	//返回一个promise 以便于以后链式调用
    return new Promise((resolve, reject) => {
        
    })
}

四: 需要一个handel来处理 then中promise的resolve和reject

// 处理函数
                function handel(callback) {
                    try {
                        const result = callback(this.date)
                        //需要判断result是否是promise
                        //1.result是promise  可以调用该promise的then函数  在其then函数中 调用promise中的resolve把结果返回
                        if (result instanceof Promise) {
                            result.then(
                                value => resolve(value),
                                reason => reject(reason)
                            )
                        } else {
                            //result不是promise对象
                            resolve(result)
                        }
                    } catch (error) {
                        reject(error)
                    }
                }

优化五:给Promise.prototype.then函数的参数添加默认值 (链式调用的关键)

1	Promise.prototype.then = function (onResolved = res => res, onRejected = reason => { throw reason }) {}

完整代码:

<!-- promise -->
<script>
    //Promise构造函数
    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'
    function Promise(executor) {
        //检测传入的是否是一个函数 如果不是 直接抛出一个错误
        if (typeof executor !== 'function') {
            throw new TypeError(`Promise resolver ${executor} is not a function`)
        }
        // 保存 this
        const that = this
        // 状态 pending resolved rejected
        that.status = 'PENDING'
        // 数据
        that.date = ''
        // 回调函数  储存形式：{resolved; rejected}
        that.callbacks = []

        function resolve(value) {
            //修改状态
            that.status = RESOLVED
            that.date = value
            // 异步执行
            if (that.callbacks.length > 0) {
                setTimeout(() => {
                    that.callbacks.forEach(callbacksObject => {
                        callbacksObject.onResolved(value)
                    });
                })
            }
        }

        function reject(reason) {
            //修改状态
            that.status = REJECTED
            that.date = reason
            // 异步执行
            if (that.callbacks.length > 0) {
                setTimeout(() => {
                    that.callbacks.forEach(callbacksObject => {
                        callbacksObject.onRejected(reason)
                    });
                })
            }
        }

        // 立即执行 执行器
        try {
            executor(resolve, reject)
        } catch (reason) {
            reject(reason)
        }
    }

    // 原型上的then方法 实例使用
    Promise.prototype.then = function (onResolved = res => res, onRejected = reason => { throw reason }) {
        return new Promise((resolve, reject) => {
            // 处理函数
            function handel(callback) {
                try {
                    const result = callback(this.date)
                    //1.result是promise
                    if (result instanceof Promise) {
                        result.then(
                            value => resolve(value),
                            reason => reject(reason)
                        )
                    } else {
                        //result不是promise对象
                        resolve(result)
                    }
                } catch (error) {
                    reject(error)
                }
            }
            if (this.status === 'PENDING') {
                //把函数添加进callbacks里面
                this.callbacks.push({
                    // 箭头函数 把this指向Promise对象
                    onResolved: () => {
                        handel.call(this, onResolved)
                    },
                    onRejected: () => {
                        handel.call(this, onRejected)
                    }
                })
            } else if (this.status === 'resolved') {
                setTimeout(() => {
                    // 如果之久handel的话 this指向的是window 使用call 把handel的this指向Promise对象
                    handel.call(this, onResolved)
                })
            } else {
                // 如果之久handel的话 this指向的是window 使用call 把handel的this指向Promise对象
                setTimeout(() => {
                    handel.call(this, onRejected)
                })
            }
        })
    }

    // 原型上的catch方法 实例使用
    Promise.prototype.catch = function (onRejected) {
        this.then(undefined, onRejected)
    }

    //构造函数的方法resolve
    Promise.resolve = function (value) {

    }

    //构造函数的方法reject
    Promise.reject = function (reason) {

    }

</script>

测试代码:(已支持链式调用)

<!-- 测试代码 -->
    <script>
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(1)
                // reject(1)
            }, 1000)
            // resolve(1)
            // reject(1)
        })
        p.then(res => {
            console.log(res)
            return new Promise((resolve, reject) => {
                reject(2)
            })
        }).catch(err => console.log(err))
        // p.catch(err => console.log(err))
        // p.then(res => console.log(res))
    </script>

未完待续…..

经过一小时,我又来了

继续

实现Promise.resolve和Promise.reject

//构造函数的方法resolve
        Promise.resolve = function (value) {
            return new Promise((resolve, reject) => {
                if (value instanceof Promise) {
                    value.then(resolve, reject)
                } else {
                    resolve(value)
                }
            })
        }

        //构造函数的方法reject
        Promise.reject = function (reason) {
            return new Promise((resolve, reject) => {
                reject(reason)
            })
        }

测试代码

var p = Promise.resolve(1)
       var p1 = Promise.reject(2)
       var p2 = Promise.resolve(Promise.reject(3))
       p.then(res => {
           console.log(res);
       })
       p1.catch(err => {
           console.log(err)
       })
       p2.catch(err => {
           console.log(err);
       })

未完待续…哈哈哈

我又来了,隔了一天

我带来了完整版的手写Promise

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise的实现</title>
</head>

<body>
    <!-- promise -->
    <script>
        //Promise构造函数
        const PENDING = 'pending'
        const RESOLVED = 'resolved'
        const REJECTED = 'rejected'
        function Promise(executor) {
            //检测传入的是否是一个函数 如果不是 直接抛出一个错误
            if (typeof executor !== 'function') {
                throw new TypeError(`Promise resolver ${executor} is not a function`)
            }
            // 保存 this
            const that = this
            // 状态 pending resolved rejected
            that.status = 'PENDING'
            // 数据
            that.date = ''
            // 回调函数  储存形式：{resolved; rejected}
            that.callbacks = []

            function resolve(value) {
                if (that.status !== PENDING) {
                    return
                }
                //修改状态
                that.status = RESOLVED
                that.date = value
                // 异步执行
                if (that.callbacks.length > 0) {
                    setTimeout(() => {
                        that.callbacks.forEach(callbacksObject => {
                            callbacksObject.onResolved(value)
                        });
                    })
                }
            }

            function reject(reason) {
                if (that.status !== PENDING) {
                    return
                }
                //修改状态
                that.status = REJECTED
                that.date = reason
                // 异步执行
                if (that.callbacks.length > 0) {
                    setTimeout(() => {
                        that.callbacks.forEach(callbacksObject => {
                            callbacksObject.onRejected(reason)
                        });
                    })
                }
            }

            // 立即执行 执行器
            try {
                executor(resolve, reject)
            } catch (reason) {
                reject(reason)
            }
        }

        // 原型上的then方法 实例使用
        Promise.prototype.then = function (onResolved = res => res, onRejected = reason => { throw reason }) {
            return new Promise((resolve, reject) => {
                // 处理函数
                function handel(callback) {
                    try {
                        const result = callback(this.date)
                        //1.result是promise
                        if (result instanceof Promise) {
                            result.then(
                                value => resolve(value),
                                reason => reject(reason)
                            )
                        } else {
                            //result不是promise对象
                            resolve(result)
                        }
                    } catch (error) {
                        reject(error)
                    }
                }
                if (this.status === 'PENDING') {
                    //把函数添加进callbacks里面
                    this.callbacks.push({
                        // 箭头函数 把this指向Promise对象
                        onResolved: () => {
                            handel.call(this, onResolved)
                        },
                        onRejected: () => {
                            handel.call(this, onRejected)
                        }
                    })
                } else if (this.status === 'resolved') {
                    setTimeout(() => {
                        // 如果之久handel的话 this指向的是window 使用call 把handel的this指向Promise对象
                        handel.call(this, onResolved)
                    })
                } else {
                    // 如果之久handel的话 this指向的是window 使用call 把handel的this指向Promise对象
                    setTimeout(() => {
                        handel.call(this, onRejected)
                    })
                }
            })
        }

        // 原型上的catch方法 实例使用
        Promise.prototype.catch = function (onRejected) {
            this.then(undefined, onRejected)
        }

        //构造函数的方法resolve
        Promise.resolve = function (value) {
            return new Promise((resolve, reject) => {
                if (value instanceof Promise) {
                    value.then(resolve, reject)
                } else {
                    resolve(value)
                }
            })
        }

        //构造函数的方法reject
        Promise.reject = function (reason) {
            return new Promise((resolve, reject) => {
                reject(reason)
            })
        }

        //构造函数的方法all
        Promise.all = function (promises) {
            console.log(promises);
            // 保存promise返回的value
            const values = new Array(promises.length)
            // 记录传入的promise成功的格式
            let resolveCount = 0
            //返回一个Promise  此Promise的结果由promises决定 有一个失败 则此Promise就失败 所有的都成功,此Promise就成功
            return new Promise((resolve, reject) => {
                promises.forEach((p, index) => {
                    p.then(
                        value => {
                            // 把成功的值保存到values里面 并且是按顺序的
                            values[index] = value
                            // 计数加一
                            resolveCount++
                            //如果全部成功了,将return的promise的值改为resolve
                            if (resolveCount === promises.length) {
                                resolve(values)
                            }
                        },
                        reason => reject(reason)
                    )
                });
            })
        }

        //构造函数的race方法  一个待定的 Promise 只要给定的迭代中的一个promise解决或拒绝，就采用第一个promise的值作为它的值
        Promise.race = function (promises) {
            return new Promise((resolve, reject) => {
                promises.forEach((p, index) => {
                    p.then(value => {
                        resolve(value)
                    }, reason = reject(reason))
                })
            })
        }
    </script>
    <!-- 测试代码 -->
    <script>
        // var p = new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         resolve(1)
        //         reject(1)
        //     }, 1000)
        //     resolve(1)
        //     reject(1)
        // })
        // p.then(res => {
        //     console.log(res)
        //     return new Promise((resolve, reject) => {
        //         reject(2)
        //     })
        // }).catch(err => console.log(err))
        // p.catch(err => console.log(err))
        // p.then(res => console.log(res))
        // var p = Promise.resolve(1)
        // var p1 = Promise.reject(2)
        // var p2 = Promise.resolve(Promise.reject(3))
        // p.then(res => {
        //     console.log(res);
        // })
        // p1.catch(err => {
        //     console.log(err)
        // })
        // p2.catch(err => {
        //     console.log(err);
        // })
        // var p1 = new Promise((resolve, reject) => {
        //     resolve(1)
        // })
        // var p2 = new Promise((resolve, reject) => {
        //     reject(2)
        // })
        // var p3 = new Promise((resolve, reject) => {
        //     resolve(3)
        // })
        // var p = Promise.all([p1, p2, p3])
        // p.then(res => {
        //     console.log(res);
        // }).catch(reason => {
        //     console.log(reason);
        // })
    </script>
</body>

</html>