VueBloghyhero6

对promise进行凝结性质进行测试， 探索如何实在then 的位置进行回调的

2022-03-21 / 2022-03-21 / 363次浏览 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这次测试是简易版本的看then是如何执行的</title>
</head>
<body>
<script>
    function Promise(executor) {
        this.status = 'pending'
        this.value = null
        this.reason = null

        const resolve = value => {
            if (this.status === 'pending') {
                this.value = value
                this.status = 'fulfilled'
            }
        }

        const reject = reason => {
            if (this.status === 'pending') {
                this.reason = reason
                this.status = 'rejected'
            }
        }

        executor(resolve, reject)
    }

    Promise.prototype.then = function(onfulfilled, onrejected) {
        onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
        onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}

        if (this.status === 'fulfilled') {
            onfulfilled(this.value)
        }
        if (this.status === 'rejected') {
            onrejected(this.reason)
        }
    }

    let promise = new Promise((resolve, reject) => {
        resolve('data')
        reject('error')
    })

    promise.then(data => {
        console.log(data)
    }, error => {
        console.log(error)
    })
</script>
</body>
</html>

简易版第一版，大佬已经实现了状态判断，但是还是不支持setTimeOut 的写法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对promise进行测试</title>
</head>
<body>
<script>
    function Promise(executor) {
        this.status = 'pending'
        this.value = null
        this.reason = null
        this.onFulfilledFunc = Function.prototype
        this.onRejectedFunc = Function.prototype

        console.log('executor-->', executor)  // 实际上传进去的是一个函数
        // executor--> (resolve, reject) => {
        //        setTimeout(() => {
        //            resolve('data')
        //        }, 2000)
        //    }
        console.log('我们在看这个成功回调函数--->', this.onFulfilledFunc)  // 当然只是一个函数

        const resolve = value => {
            if (this.status === 'pending') {
                this.value = value
                this.status = 'fulfilled'
                console.log('这里查看这个函数应该有显示了--->', this.onFulfilledFunc)

                this.onFulfilledFunc(this.value)
            }
        }

        const reject = reason => {
            if (this.status === 'pending') {
                this.reason = reason
                this.status = 'rejected'
                this.onRejectedFunc(this.reason)
            }
        }

        executor(resolve, reject)
    }

    Promise.prototype.then = function(onfulfilled, onrejected) {
        onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
        onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}

        if (this.status === 'fulfilled') {
            onfulfilled(this.value)
        }
        if (this.status === 'rejected') {
            onrejected(this.reason)
        }
        if (this.status === 'pending') {  // 也就是说pending的做了时效凝结
            this.onFulfilledFunc = onfulfilled
            this.onRejectedFunc = onrejected
        }
    }


    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('data')
        }, 2000)
    })

    promise.then(data => {
        console.log('如何做到的凝结时间持久化')
        console.log(data)
    })
</script>
</body>
</html>

第二版，其实仔细查看代码我可以得出结论就是，promise本质也是同步的代码，只不过 then 函数 （怎么讲呢，算是回调到函数本身缓存住了，setTimeout 得以缓存这个样子。

文章采用 知识共享署名 4.0 国际许可协议 进行许可，转载时请注明原文链接。