自己封装promise

最新推荐文章于 2024-02-22 19:52:10 发布

LoveZJC12138

最新推荐文章于 2024-02-22 19:52:10 发布

阅读量133

点赞数

文章标签： javascript 前端 servlet vue.js 开发语言

本文链接：https://blog.csdn.net/LoveZJC96/article/details/125672220

版权

function Promise(fn) {
    console.log(3);
    //每一次执行Promis直接设置为pending
    this.PromiseStatus = 'pending'
    this.PromiseRsult = undefined
    //异步操作里保存要执行的函数
    this.callBack = []
    //让里面的函数指向Promise
    let that = this
    function resolve(res) {
        //console.log(res);
        // console.log(2);
        //如果此时PromiseStatus等于pending，会执行return直接 强制 让函数结束
        if (that.PromiseStatus !== 'pending') return
        //修改对象状态
        that.PromiseStatus = 'fulfilled'
        //获得对象的值
        that.PromiseRsult = res
        that.callBack.map(val => {
            //console.log(val);
            val.onResolve(res)

        })
    }
    function reject(res) {
        if (that.PromiseStatus !== 'pending') return
        //修改对象状态
        that.PromiseStatus = 'rejected'
        //获得对象的值
        that.PromiseRsult = res
        that.callBack.map(val => {
            val.onReject(res)
        })
    }
    try {
        //console.log(fn);
        fn(resolve, reject)
    } catch (error) {
        reject(error)
    }
}

//封装then
Promise.prototype.then = function (onResolve, onReject) {
    console.log(4);
    if (typeof onReject !== Function) {
        onReject = (e) => {
            throw e
        }
    }
    return new Promise((resolve, reject) => {
        if (this.PromiseStatus == 'fulfilled') {
            try {
                let result = onResolve(this.PromiseRsult)
                if (result instanceof Promise) {
                    result.then(r => {
                        resolve(r)
                    }, s => {
                        reject(s)
                    })
                } else {
                    resolve(result)
                }
            } catch (error) {
                reject(error)
            }

        }
        if (this.PromiseStatus == 'rejected') {
            try {
                let result = onReject(this.PromiseRsult)
                if (result instanceof Promise) {
                    result.then(r => {
                        resolve(r)
                    }, s => {
                        reject(s)
                    })
                } else {
                    resolve(result)
                }
            } catch (error) {
                reject(error)
            }

        }
        if (this.PromiseStatus == 'pending') {
            let that = this
            this.callBack.push({
                onResolve: function () {
                    try {
                        let result = onResolve(that.PromiseRsult)
                        // console.log(result);
                        if (result instanceof Promise) {
                            result.then(r => {
                                resolve(r)
                            }, s => {
                                reject(s)
                            })
                        } else {
                            resolve(result)
                        }
                    } catch (error) {
                        reject(error)
                    }

                },
                onReject: function () {
                    try {
                        let result = onReject(that.PromiseRsult)
                        if (result instanceof Promise) {
                            result.then(r => {
                                resolve(r)
                            }, s => {
                                reject(s)
                            })
                        } else {
                            resolve(result)
                        }
                    } catch (error) {
                        reject(error)
                    }

                }
            })
        }
    })
}

//封装catch
Promise.prototype.catch = function (onReject) {
    return this.then(undefined, onReject)
}

html；

<!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">
    <script src="./promise1.js"></script>
    <title>Document</title>
</head>

<body>

    <div>如果promise中执行的是异步操作，那么先执行then，再执行promise中的操作。如果不是，那么则先执行promise中的操作，最后再执行then中操作</div>

    <script>
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK')
            }, 1000)
            //throw 'erro'
            // resolve('OK')
            // reject('erro')
            //console.log(1);
        })

        p.then(resolve => {
            console.log(2);

        }).then(resolve => {

            console.log(resolve);

        })

        console.log(p);
        // console.log(p);
        // let res = p.then(resolve => {

        //     console.log(111);
        // })

        // console.log(res);



    </script>
</body>

</html>