手写简单promise

最新推荐文章于 2023-05-30 11:06:04 发布

webprevious

最新推荐文章于 2023-05-30 11:06:04 发布

阅读量94

点赞数

文章标签： promise

本文链接：https://blog.csdn.net/weixin_32682577/article/details/103702722

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn">click me</button>
    <script>
        function Test() {
            // 使用this声明的变量和方法称之为实例属性和方法，为public类型
            this.age = 10
            // 使用let var const声明为private变量，只能内部使用
            let score = 80
            // 使用static声明的熟悉和方法为静态属性和方法，只有通过构造函数本身来访问，或者在静态方法内使用this访问，其他地方只能通过构造函数访问
            // static声明只能在class内声明
        }
        Test.prototype.name = 'lisi'
        let test = new Test()
        console.log(test)
        console.log(test.name) // 先从实例本身看是否具有该属性和方法，没有就上原型找该属性和方法，因此就有了最原始的构造函数继承和原型继承
    </script>
    <script>
        let btn = document.getElementById('btn')
        btn.onclick = (e) => {
            console.log(e)
        }
        /**
         * 手写Promise
         * @date 2019-12-25
         * @param {function} executor
         * @returns {any}
         */
        function MyPromise(executor) {
            this.state = 'pending' // promise有等待态、成功态、失败态这3个状态
            this.value = undefined // 存放成功态结果
            this.reason = undefined // 存放失败态结果
            this.resolveCallBacks = [] // 存放当executor存在异步操作时但状态为pending，此时调用resolve回调就不能得到结果
            this.rejectCallBacks = [] // 存放当executor存在异步操作时但状态为pending，此时调用reject回调就不能得到结果
            let _this = this
            // 立即执行
            executor(resolve, reject)

            // 成功后改变state并收集结果
            function resolve(value) {
                if (_this.state === 'pending') {
                    _this.value = value
                    _this.resolveCallBacks.forEach(fn => fn(value))
                    _this.state = 'resolved'
                }
            }
            // 失败后改变state并收集结果
            function reject(reason) {
                if (_this.state === 'pending') {
                    _this.reason = reason
                    _this.rejectCallBacks.forEach(fn => fn(reason))
                    _this.state = 'rejectd'
                }
            }
        }
        MyPromise.prototype.then = function (onResolve, onReject) {
            // then接收成功和失败的回调函数，向外抛出结果
            if (this.state === 'pending') {
                // 还未得到结果，将回调存起来，等有结果了再执行,支持链式调用
                return new MyPromise((resolve, reject) => {
                    this.resolveCallBacks.push((onResolve => {
                        return () => {
                            let res = onResolve(this.value)
                            if (res instanceof MyPromise) {
                                res.then(resolve, reject)
                            } else {
                                resolve(res)
                            }
                        }
                    })(onResolve))
                    this.rejectCallBacks.push((onReject => {
                        return () => {
                            let res = onReject(this.value)
                            if (res instanceof MyPromise) {
                                res.then(resolve, reject)
                            } else {
                                resolve(res)
                            }
                        }
                    })(onReject))
                })
            }
            if (this.state === 'resolved' && typeof onResolve === 'function') {
                // 得到成功结果，向外抛出，并支持链式调用
                return new MyPromise((resolve, reject) => {
                    let res = onResolve(this.value)
                    if (res instanceof MyPromise) {
                        res.then(resolve, reject)
                    } else {
                        resolve(res)
                    }
                })
            }
            if (this.state === 'rejectd' && typeof onReject === 'function') {
                // 得到失败结果，向外抛出，并支持链式调用
                return new MyPromise((resolve, reject) => {
                    let res = onReject(this.reason)
                    if (res instanceof MyPromise) {
                        res.then(resolve, reject)
                    } else {
                        resolve(res)
                    }
                })
            }
        }
        let p = new MyPromise(function (resolve, reject) {
            setTimeout(function () {
                resolve(new MyPromise(function (resolve, reject) {
                    setTimeout(function () {
                        resolve(1111111111111)
                    }, 4000)
                }))
            }, 2000)
        })
        p.then(res => {
            console.log(res)
            return res
        }).then(re => {
            console.log(re)
        })
    </script>
</body>

</html>

webprevious

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写简单promise

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫