南山有壶酒-文章-手写Promise

站点信息
标签云
作词 : 偽物
手写Promise
2023/7/11 23:50:57 |
0 |
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    class myPromise {
        constructor(executor) {
            this.status = 'pending' 
            this.value = null 
            this.error = null

            this.onFulfilledCallbacks = []
            this.onRejectedCallbacks = []

            const resolve = ((value) => {
                if (this.status === 'pending') {
                    this.status = 'fulfilled'
                    this.value = value
                    queueMicrotask(() => { 
                        this.onFulfilledCallbacks.forEach(fn=>fn(this.value))
                    })
                }
            })
    
    
            const reject = ((error) => {
                if (this.status === 'pending') {
                    this.status = 'rejected'
                    this.error = error
                    queueMicrotask(() => { 
                        this.onRejectedCallbacks.forEach(fn=>fn(this.error))
                    })
                }
            })
            executor(resolve, reject)
        }
        then(onFulfilled,onRejected){
            const defaultOnRejected = err => {
                return new myPromise((resolve,reject)=>{
                    reject(err)
                })
            }
            const defaultonFulfilled = (value)=>{
                return new myPromise((resolve,reject)=>{
                    resolve(value)
                })
            }
            onRejected = onRejected || defaultOnRejected
            onFulfilled = onFulfilled || defaultonFulfilled
            if(this.status === 'fulfilled'){
                return new myPromise((resolve,reject)=>{
                    try {
                        let x = onFulfilled(this.value)
                        x instanceof myPromise ? x.then(resolve,reject):resolve(x)
                    } catch (error) {
                        reject(error)
                    }
                })
            }
            if(this.status === 'rejected'){
                return  new myPromise((resolve,reject)=>{
                    try {
                        let x = onRejected(this.error)
                        x instanceof myPromise ? x.then(resolve,reject):reject(x)
                    } catch (error) {
                        reject(error)
                    }
                })
            }
            if(this.status === 'pending'){
                return new myPromise((resolve,reject)=>{
                    this.onFulfilledCallbacks.push(()=>{
                        let x = onFulfilled(this.value)
                        x instanceof myPromise ? x.then(resolve,reject):resolve(x)
                    })
                    this.onRejectedCallbacks.push(()=>{
                        let x = onRejected(this.error)
                        x instanceof myPromise ? x.then(resolve,reject):reject(x)
                    })
                })
            }
        }
        catch (onRejected) {
            return this.then(null, onRejected)
        }
        finally(fn){
            return this.then(fn, fn)
        }
    }
</script>
<body>
    <script>
        const p1 = new myPromise((resolve, reject) => {
            // reject(333333)
            setTimeout(()=>{
                resolve(333333)
            },3000)
        })
        
        p1.then(res => {
            console.log("res1:", res)
            return new myPromise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve(2222)
                },3000)
            })
        }).then((res)=>{
            console.log("res2:", res)
        }).catch((err)=>{
            console.log("err",err)
        }).finally(()=>{
            console.log(1145145)
        })
    </script>
</body>
</html>
标题：手写Promise
作者：southernMD
发布于：
评论列表（0）