珠峰架构 - 手写promise

た入场券 2021-09-09 05:32 574阅读 0赞

## 核心思想 ##

核心思想是状态的改变，会引起值的改变，且状态不可逆。主要是为了解决异步回调地狱问题
    1. 三个状态 pending,fulfilled,rejected.三者的初始状态都是pending.且只能是
    pending->fulfilled,
    pending->rejected
    2. new Promsie的时候，需要传一个执行器，executor，执行器立即执行
    3. 状态的改变，会引起值的改变，成功和失败的值，分别为value,reason
    4. promise必须有一个then方法，来接收成功/失败的结果
    5. 如果then抛出了异常，那么会把这个异常作为参数，传递给下一个失败的回调函数中

### promise ###

const PENDING = 'PENDING'
    const RESOLVE = 'RESOLVE'
    const REJECT = 'REJECT'
    console.log('my')
    class PromiseA { 
        constructor(executor) { 
            this.value = undefined
            this.reason = undefined
            this.status = PENDING
            let resolve = (value) => { 
                if (this.status === PENDING) { 
                    this.status = RESOLVE
                    this.value = value
    
                }
            }
            let reject = (reason) => { 
                if (this.status === PENDING) { 
                    this.status = REJECT
                    this.reason = reason
                }
            }
            executor(resolve, reject)
        }
        then(onFulfilled, onRejected) { 
            if (this.status === RESOLVE) { 
                onFulfilled(this.value)
            }
            if (this.status === REJECT) { 
                onRejected(this.reason)
            }
        }
    }
    module.exports = PromiseA

### test ###

### promsie出现异步处理 ###

*  由于executor是立即执行的，所以相当于同步代码。如果出现定时器，那定时器里的状态改变，要等到定时器执行才会改变。但是then的时候，由于状态没有发生改变，还是pending状态，所以将pending状态的代码订阅起来，等定时器执行，再将其发布出去，这也是订阅发布者模式

### promise+异步 ###

const PENDING = 'PENDING'
    const RESOLVE = 'RESOLVE'
    const REJECT = 'REJECT'
    console.log('my')
    class PromiseA { 
        constructor(executor) { 
            this.value = undefined
            this.reason = undefined
            this.onFulfilledCallbacks = []
            this.onRjectedCallBacks = []
            this.status = PENDING
            let resolve = (value) => { 
                if (this.status === PENDING) { 
                    this.status = RESOLVE
                    this.value = value
                    this.onFulfilledCallbacks.forEach(fn => fn()) // 发布
    
                }
            }
            let reject = (reason) => { 
                if (this.status === PENDING) { 
                    this.status = REJECT
                    this.reason = reason
                    this.onRjectedCallBacks.forEach(fn => fn()) // 发布
                }
            }
            executor(resolve, reject)
        }
        then(onFulfilled, onRejected) { 
            if (this.status === RESOLVE) { 
                onFulfilled(this.value)
            }
            if (this.status === REJECT) { 
                onRejected(this.reason)
            }
            if (this.status === PENDING) {  // 如果状态是pending，将方法进行订阅
                this.onFulfilledCallbacks.push(() => { 
                    onFulfilled(this.value)
                })
                this.onRjectedCallBacks.push(() => { 
                    onRejected(this.reason)
                })
            }
        }
    }
    module.exports = PromiseA

### test ###

## then 的链式调用&值穿透特性 ##

1.  promise.then().then()，那么其后面的 then 依旧可以得到之前 then 返回的值，这就是所谓的值的穿透
2.  如果每次调用 then 的时候，我们都重新创建一个 promise 对象，并把上一个 then 的返回结果传给这个新的 promise 的 then 方法，不就可以一直 then 下去了么
3.  then的参数onFulfilled,onRejected可以不传，但是内部你得给他转成函数

const PENDING = 'PENDING'
    const RESOLVE = 'RESOLVE'
    const REJECT = 'REJECT'
    console.log('my')
    const resolvePromise = (promise2, x, resolve, reject) => { 
        if (promise2 === x) { 
            return reject(new TypeError(xxx))
        }
        let called;
        if ((typeof x === 'object' && typeof x !== 'null') || typeof x === 'function') { 
            try { 
                let then = x.then
                if (typeof then === 'function') { 
                    then.call(x, y => {  // 根据promise的状态来决定是成功还是失败
                        // resolve(y)
                        if (called) return
                        called = true
                        resolvePromise(promise2, y, resolve, reject)
                    }, err => { 
                        if (called) return
                        called = true
                        reject(err)
                    })
                } else { 
                    reject(x)
                }
            } catch (error) { 
                if (called) return
                called = true
                reject(error)
            }
        } else { 
            resolve(x) // 普通值
        }
    }
    class PromiseA { 
        constructor(executor) { 
            this.value = undefined
            this.reason = undefined
            this.onFulfilledCallbacks = []
            this.onRjectedCallBacks = []
            this.status = PENDING
            let resolve = (value) => { 
                if (this.status === PENDING) { 
                    this.status = RESOLVE
                    this.value = value
                    this.onFulfilledCallbacks.forEach(fn => fn())
    
                }
            }
            let reject = (reason) => { 
                if (this.status === PENDING) { 
                    this.status = REJECT
                    this.reason = reason
                    this.onRjectedCallBacks.forEach(fn => fn())
                }
            }
            executor(resolve, reject)
        }
        then(onFulfilled, onRejected) { 
            onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
            onRejected = typeof onRejected === 'function' ? onRejected : err => {  throw err }
            let promise2 = new PromiseA((resolve, reject) => { 
                if (this.status === RESOLVE) { 
                    setTimeout(() => { 
                        try { 
                            let x = onFulfilled(this.value)
                            // resolve(x) 普通值
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (error) { 
                            reject(error)
                        }
    
                    })
    
                }
                if (this.status === REJECT) { 
                    setTimeout(() => { 
                        try { 
                            let x = onRejected(this.reason)
    
                            // resolve(x) 普通值
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (error) { 
                            reject(error)
                        }
    
                    })
                }
                if (this.status === PENDING) { 
                    this.onFulfilledCallbacks.push(() => { 
                        setTimeout(() => { 
                            try { 
                                let x = onFulfilled(this.value)
                                // resolve(x) 普通值
                                resolvePromise(promise2, x, resolve, reject)
                            } catch (error) { 
                                reject(error)
                            }
    
                        })
                    })
                    this.onRjectedCallBacks.push(() => { 
                        setTimeout(() => { 
                            try { 
                                let x = onRejected(this.reason)
                                // resolve(x) 普通值
                                resolvePromise(promise2, x, resolve, reject)
                            } catch (error) { 
                                reject(error)
                            }
    
                        })
                    })
                }
            })
            return promise2
    
        }
    }
    module.exports = PromiseA

### promsieAll, promsieRace实现 ###

<!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">
        <title>Document</title>
    </head>
    
    <body>
    
    </body>
    <script>
        // promise.all 可以将多个Promsie实例包装成一个新的promise实例，同时，成功和失败的返回值是不同的
        // 成果的返回值是一个结果数组，失败则返回最先被reject的失败的状态的值
        function promiseAll(promiseArr) { 
            return new Promise((resolve, reject) => {  // 返回一个新的promise实例
                let len = promiseArr.length
                let rest = []
                let count = 0
                promiseArr.forEach((val, index) => {  // 循环每一项
                    Promise.resolve(val).then((res) => {  // 对每一项进行处理
                        count++
                        rest[index] = res // 保证顺序
                        if (count === len) {  // 全部循环完毕，则将结果resolve
                            resolve(rest)
                        }
                    }).catch(err => { 
                        reject(err)
                    })
    
                });
            })
        }
        function promiseRace(promiseArr) { 
            return new Promise((resolve, reject) => { 
                promiseArr.forEach((val) => { 
                    Promise.resolve(val).then((res) => { 
                        resolve(res)
                    }).catch((e) => reject(e))
                })
    
            })
        }
        let promise1 = new Promise(function (resolve) { 
            setTimeout(() => { 
                resolve(1);
            }, 2000)
        });
        let promise2 = new Promise(function (resolve) { 
            setTimeout(() => { 
                resolve(2);
            }, 1000)
        });
        let promise3 = new Promise(function (resolve) { 
            setTimeout(() => { 
                resolve(3);
            }, 3000)
        });
        // promiseAll([promise1, promise2, promise3]).then((res) => { 
        // console.log('res', res); // 三秒后，按顺序输出 [1,2,3]
        // })
        promiseRace([promise1, promise2, promise3]).then((res) => { 
            console.log('res', res); // 三秒后，按快慢输出 2
        })
    </script>
    
    </html>