Promise实现

版本1:function函数

/**
 * 函数名-Promise-[会覆盖原始的全局Promise]
 * @constructor
 */
function Promise(executor) {
    //声明属性
    this.PromiseState = 'pending' //状态属性
    this.PromiseResult = null //结果属性
    this.callBacks = new Array() //存放then()中的回调函数
    const self = this //获取this指针的引用
        //声明:resolve
    function resolve(data) {
        //判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次]
        if (self.PromiseState !== 'pending') return
            // 1-修改状态{PromiseState}
        self.PromiseState = 'resolved'
            //2-设置对象结果值{PromiseResult}
        self.PromiseResult = data
            //异步执行:调用成功时对应的回调函数

        setTimeout(() => {
            self.callBacks.forEach((item) => {
                item.onResolved(data)
            })
        }, 0)
    }

    //声明:reject
    function reject(err) {
        //判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次]
        if (self.PromiseState !== 'pending') return
            // 1-修改状态{PromiseState}
        self.PromiseState = 'rejected'
            //2-设置对象结果值{PromiseResult}
        self.PromiseResult = err
            //异步执行:调用失败时对应的回调函数
        setTimeout(() => {
            self.callBacks.forEach((item) => {
                item.onRejected(err)
            })
        }, 0)
    }

    //异常捕获
    try {
        //executor-执行器函数是同步调用的
        executor(resolve, reject)
    } catch (e) {
        //修改promise对象状态为rejected
        reject(e)
    }
}

//函数原型-挂载then()方法
Promise.prototype.then = function(onResolved, onRejected) {
    let self = this //获取this指针
        //判断回调函数参数
    if (typeof onResolved !== 'function') {
        onResolved = (value) => {
            throw value
        }
    }
    if (typeof onRejected !== 'function') {
        onRejected = (reason) => {
            throw reason
        }
    }
    //返回结果
    return new Promise((resolve, reject) => {
        //公共函数块封装
        function callback(_callMethod) {
            try {
                //获取回调函数的执行结果
                let result = _callMethod(self.PromiseResult)
                if (result instanceof Promise) {
                    //promise对象类型
                    result.then(
                        (data) => {
                            resolve(data)
                        },
                        (err) => {
                            reject(err)
                        }
                    )
                } else {
                    //结果的对象状态为成功
                    resolve(result)
                }
            } catch (e) {
                reject(e)
            }
        }
        //根据状态PromiseState判断——调用回调函数
        //成功resolved情况
        if (this.PromiseState === 'resolved') {
            //异步执行
            setTimeout(() => {
                callback(onResolved)
            }, 0)
        }
        //失败rejected情况
        if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                callback(onRejected)
            }, 0)
        }
        //未决定pending状态
        if (this.PromiseState === 'pending') {
            //todo:保存回调函数-//异步任务处理
            this.callBacks.push({
                onResolved: function() {
                    callback(onResolved)
                },
                onRejected: function() {
                    callback(onRejected)
                },
            })
        }
    })
}

//函数原型-挂载catch()方法
Promise.prototype.catch = function(onRejected) {
    return this.then(undefined, onRejected)
}

//函数-挂载resolve()方法
Promise.resolve = function(value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(
                (v) => {
                    resolve(v)
                },
                (e) => {
                    reject(e)
                }
            )
        } else {
            resolve(value)
        }
    })
}

//函数-挂载reject()方法
Promise.reject = function(value) {
    return new Promise((resolve, reject) => {
        reject(value)
    })
}

//函数-挂载all()方法
Promise.all = function(promises) {
    return new Promise((resolve, reject) => {
        let flag = 0 //标记值
        let resultData = new Array() //存放成功结果的数组
            //判断参数数组中的promise的状态值
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(
                (data) => {
                    //执行第1个函数-状态成功
                    flag++
                    resultData[i] = data //通过下标赋值-保证元素的顺序
                    if (flag === promises.length) {
                        //修改状态
                        resolve(resultData)
                    }
                },
                (err) => {
                    //执行第2个函数-状态失败
                    reject(err)
                }
            )
        }
    })
}

//函数-挂载race方法
Promise.race = function(promises) {
    return new Promise((resolve, reject) => {
        //遍历数组元素-[Promise的状态只能修改一次]
        for (let i = 0; i < promises.length; i++) {
            //判断状态值
            promises[i].then(
                (data) => {
                    //修改状态-成功
                    resolve(data)
                },
                (err) => {
                    //修改状态-失败
                    reject(err)
                }
            )
        }
    })
}

版本2:class类

class Promise {
    //构造函数
    constructor(executor) {
        //声明属性
        this.PromiseState = 'pending' //状态属性
        this.PromiseResult = null //结果属性
        this.callBacks = new Array() //存放then()中的回调函数
        const self = this //获取this指针的引用
            //声明:resolve
        function resolve(data) {
            //判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次]
            if (self.PromiseState !== 'pending') return
                // 1-修改状态{PromiseState}
            self.PromiseState = 'resolved'
                //2-设置对象结果值{PromiseResult}
            self.PromiseResult = data
                //异步执行:调用成功时对应的回调函数

            setTimeout(() => {
                self.callBacks.forEach((item) => {
                    item.onResolved(data)
                })
            }, 0)
        }

        //声明:reject
        function reject(err) {
            //判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次]
            if (self.PromiseState !== 'pending') return
                // 1-修改状态{PromiseState}
            self.PromiseState = 'rejected'
                //2-设置对象结果值{PromiseResult}
            self.PromiseResult = err
                //异步执行:调用失败时对应的回调函数
            setTimeout(() => {
                self.callBacks.forEach((item) => {
                    item.onRejected(err)
                })
            }, 0)
        }

        //异常捕获
        try {
            //executor-执行器函数是同步调用的
            executor(resolve, reject)
        } catch (e) {
            //修改promise对象状态为rejected
            reject(e)
        }
    }

    //then方法
    then(onResolved, onRejected) {
        let self = this //获取this指针
            //判断回调函数参数
        if (typeof onResolved !== 'function') {
            onResolved = (value) => {
                throw value
            }
        }
        if (typeof onRejected !== 'function') {
            onRejected = (reason) => {
                throw reason
            }
        }
        //返回结果
        return new Promise((resolve, reject) => {
            //公共函数块封装
            function callback(_callMethod) {
                try {
                    //获取回调函数的执行结果
                    let result = _callMethod(self.PromiseResult)
                    if (result instanceof Promise) {
                        //promise对象类型
                        result.then(
                            (data) => {
                                resolve(data)
                            },
                            (err) => {
                                reject(err)
                            }
                        )
                    } else {
                        //结果的对象状态为成功
                        resolve(result)
                    }
                } catch (e) {
                    reject(e)
                }
            }
            //根据状态PromiseState判断——调用回调函数
            //成功resolved情况
            if (this.PromiseState === 'resolved') {
                //异步执行
                setTimeout(() => {
                    callback(onResolved)
                }, 0)
            }
            //失败rejected情况
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    callback(onRejected)
                }, 0)
            }
            //未决定pending状态
            if (this.PromiseState === 'pending') {
                //todo:保存回调函数-//异步任务处理
                this.callBacks.push({
                    onResolved: function() {
                        callback(onResolved)
                    },
                    onRejected: function() {
                        callback(onRejected)
                    },
                })
            }
        })
    }

    //catch方法
    catch (onRejected) {
        return this.then(undefined, onRejected)
    }

    //resolve方法-静态成员
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(
                    (v) => {
                        resolve(v)
                    },
                    (e) => {
                        reject(e)
                    }
                )
            } else {
                resolve(value)
            }
        })
    }

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

    //all
    static all(promises) {
        return new Promise((resolve, reject) => {
            let flag = 0 //标记值
            let resultData = new Array() //存放成功结果的数组
                //判断参数数组中的promise的状态值
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(
                    (data) => {
                        //执行第1个函数-状态成功
                        flag++
                        resultData[i] = data //通过下标赋值-保证元素的顺序
                        if (flag === promises.length) {
                            //修改状态
                            resolve(resultData)
                        }
                    },
                    (err) => {
                        //执行第2个函数-状态失败
                        reject(err)
                    }
                )
            }
        })
    }

    //race
    static race(promises) {
        return new Promise((resolve, reject) => {
            //遍历数组元素-[Promise的状态只能修改一次]
            for (let i = 0; i < promises.length; i++) {
                //判断状态值
                promises[i].then(
                    (data) => {
                        //修改状态-成功
                        resolve(data)
                    },
                    (err) => {
                        //修改状态-失败
                        reject(err)
                    }
                )
            }
        })
    }
}

测试代码

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

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
<script type="text/javascript" src="./utils/promiseClass.js"></script>
<script>
    console.log(Promise.resolve(new Promise((resolve, reject) => {
        resolve("SUCCESS");
    })))

    console.log(Promise.resolve(Promise.resolve("ahikds")))

    console.log(Promise.reject("ahiksdla"))

    let p1 = new Promise((resolve, reject) => {
        resolve("a");
    })
    let p2 = Promise.resolve("b")
    let p3 = new Promise((resolve, reject) => {
        resolve("c");
    })

    console.log(Promise.all([p1, p2, p3]))

    console.log(Promise.race([p1, p2, p3]));
</script>

</html>

Promise实现_第1张图片

你可能感兴趣的