Promsie源码解析一步到位

迈不过友情╰ 2022-09-16 15:30 87阅读 0赞

> ##### 碎碎念： #####
> 
> 亲爱的读者：你好！我叫 Changlon —— 一个非科班程序员、一个致力于前端的开发者、一个热爱生活且又时有忧郁的思考者。
> 
> 如果我的文章能给你带来一些收获，你的点赞收藏将是对我莫大的鼓励！
> 
> 我的邮箱:thinker\_changlon@163.com
> 
> 我的Github: [https://github.com/Changlon][https_github.com_Changlon]

本章我将带领大家手写一个符合promise/a+ 规范的Promise。可以说这是前端工程师必须要掌握的一个技术，在项目中使用到的非常多。  
那么promsie究竟是如何实现的呢？本篇文章将通过手写一个promsie来揭开Promsie神秘的面纱！  
下面请拿起你的键盘跟我一起来撸一个promise吧！相信写完之后你会对Promise有更加深刻的理解！

在开始前我想请大家先阅读一下什么是promsie/a+规范，它规定了我们如何去实现这个类。

相关链接  
[promise/a+规范网址][promise_a]  
[myPromise源码github地址][myPromise_github]

### 文章目录 ###

*  一 、promsie构造函数
 *  二 、then函数
 *  三、 实现promise/a+规范的then函数
 *  四 、实现catch捕获异常函数
 *  五 、实现 resolve,reject静态函数
 *  六、 实现 race,all函数

# 一 、promsie构造函数 #

先来写一个promise的构造函数吧，先来想一想我们平时使用Promise都是一般这样使用的 `new Promise((resolve,reject)=>{})` 。我们要传一个执行函数作为构造器的参数。这个执行函数是在实例化类的时候执行的，也就是说这里面的代码是非异步执行。

/** promsie构造函数 */
    export default class promise{  
        constructor(hanlder) {  
            this.checkHandler(hanlder) ?  
                this.init(hanlder)
            : void 0
        }
        
        /**初始化promise */
        init(hanlder) {   
        }
        /**检查构造器参数 */
        checkHandler(hanlder) {   
            if(!hanlder) throw new Error('new promsie 需要一个函数类型的参数!') 
            if(!(hanlder instanceof Function)) throw new Error('new promsie 需要一个函数类型的参数!') 
            return true 
        }
    
    }

上面的代码我们先判断在`new promise`类时是否传入了正确的参数，如果检查参数符合要求则进入`init`方法初始化类，不符合要求则抛出我们规定的异常。  
接下来我们就来考虑如何去实现这个`init` 方法。首先我们需要记录一下实例对象，然后在实例上定义一组状态变量用来确定当前promise的状态。然后去执行这个执行函数`handler`就可以了。

//记录原本的实例对象
    		const that = this 
    		//定义状态变量
            that.pending = "pending"
            that.fulfilled = "fulfilled"
            that.rejected = 'rejected' 
            that.status = this.pending   
            //定义value fulfilled或rejected状态返回的值
            that.value = undefined  
            
    
            /** fulfilled状态处理函数 */
            function onResolved(value) { 
            	//如果状态一改变就不能改变当前状态了
                if(that.status!=that.pending) return void 0 
                that.status = that.fulfilled  
                that.value = value 
            }
    
            /** rejected状态处理函数 */
            function onRejected(reason) {  
                if(that.status!=that.pending) return void 0 
                that.status = that.rejected  
                that.value = reason
            }
            
            //使用try...catch 捕获用户代码可能出现的异常
            try { 
                hanlder(onResolved,onRejected) 
            }catch(e)  { 
                throw new Error(`用户自定义程序报错:${ e}`)
            }

# 二 、then函数 #

我们再来回顾一下`Promise`的用法。当我们在执行函数中同步`resolve,reject`值时，then函数也是同步执行的。如何`resolve,reject`值是在异步代码中，那么then函数会在异步代码执行后再去执行。  
举个例子:

//测试例子 demo1
    const p = new promise((resolve,reject)=>{   
        // resolve('test') //这里的 'test'会立刻打印
    	  setTimeout(()=>{  
                resolve('test')
          },1000)
    })
    
    //这时候 'test' 会在1s后才能打印出来
    p.then(value=>{ 
        console.log(value)
    },reason=>{ 
        console.log(reason)
    })

我们发现then函数是根据 status状态来异步或同步执行的 。当状态是 `'fulfilled'`或`'rejected'`时候`then`函数同步执行，如果是`'pending'`状态则说明改变状态的函数是在下一个事件循环中才被执行，我们这时候也需要将对then中处理结果值得函数`onFulfilled,onRejected`放到异步队列中去执行。  
then函数的简单实现如下:

then(onFulfilled,onRejected) {    
            const that = this 
            const value = this.value 
         	switch (that.status) {  
                        case 'pending': 
                            setTimeout(()=>{ 
                                that.then(onFulfilled,onRejected) 
                            break 
                        case 'fulfilled': 
                                onFulfilled(value) 
                            break 
                        case 'rejected' :
                                onRejected(value)
                            break 
                            
                    }
        }

# 三、 实现promise/a+规范的then函数 #

上面实现的`then`函数也仅仅能满足我们上面测试用例demo1的情况，要实现一个符合promise/a+规范的`then`函数我们还需要实现以下要求：

> 摘录自promise/a+网站  
> then must return a promise \[3.3\].  
> promise2 = promise1.then(onFulfilled, onRejected);  
> If either onFulfilled or onRejected returns a value x, run the Promise Resolution Procedure \[\[Resolve\]\](promise2, x).  
> If either onFulfilled or onRejected throws an exception e, promise2 must be rejected with e as the reason.  
> If onFulfilled is not a function and promise1 is fulfilled, promise2 must be fulfilled with the same value as promise1.  
> If onRejected is not a function and promise1 is rejected, promise2 must be rejected with the same reason as promise1.

总结一下就是:  
1.`then`函数返回一个`promise`  
2.在`onFulfilled or onRejected`中返回一个值如果这个值是非promise类型的则直接返回 `'fulfilled'`状态的`promise`对象，如果是`promise`类型的对象则直接返回这个对象。  
3.如果在`onFulfilled or onRejected`用户给出的执行函数中出现报错则必须返回一个`'rejected'`状态的`promise`  
4. 如果在一个`then`函数中 `onFulfilled`未给出，并且状态已经为`'fulfilled'`我们需要将状态值 `value` 作为返回的`promise`的状态值。`onRejected`未给出也同样如此。

下面我们来分析如何实现上面的要求。第一点很好实现我们直接修改`then`函数

then(onFulfilled,onRejected) {    
            const that = this 
            const value = this.value 
            return new promise((resolve,reject)=>{ 
    			switch (that.status) {  
    	                    case 'pending': 
    	                        setTimeout(()=>{ 
    	                            that.then(onFulfilled,onRejected) 
    	                        break 
    	                    case 'fulfilled': 
    	                            onFulfilled(value) 
    	                        break 
    	                    case 'rejected' :
    	                            onRejected(value)
    	                        break 
    	                        
    	                }
    		})
         	
        }

可这样是不行的，返回的是一个状态永远为`'pending'`的`promise`,我们需要记录`onFulfilled，onRejected`的返回值然后将返回值`resolve`。  
如下修改`switch`中的代码

case 'fulfilled': 
    		 resolve(onFulfilled(value))
    		break 
    	case 'rejected' :
     		resolve(onRejected(value)) 
    		break

可这样还是不行，如果返回的是一个`promise`对象不是js基本数据类型怎么办？还有 `onFulfilled`，`onRejected` 是使用者给出的函数，如果未传入或者在执行过程中报异常了怎么处理?  
针对上面的问题我们逐一分析。  
1.如果`onFulfilled,onRejected`返回的是一个`promise`我们怎么办，我们定义一个遍历函数去遍历这个promise状态直到最后的状态值是基本数据类型的时候我们再在返回的`promise`中去`resolve`,或`reject`这个值。  
2.`onFulfilled`或`onRejected` 未传入怎么办？ 如果未传入我们直接将它作为返回  
的`promise`状态值去向下传递。  
3.`onFulfilled`或`onRejected` 在执行过程中报异常怎么办? 我们直接将所有执行的代码包含在`try...catch`中一旦报错则返回`'rejected'`状态的`promise`即可。

根据上面的分析我们最终修改代码如下:

then(onFulfilled,onRejected) {    
            const that = this 
            const value = this.value 
            return new promise((resolve,reject)=>{  
                try { 
                    switch (that.status) {  
                        case 'pending': 
                            setTimeout(()=>{ 
                               const p =  that.then(onFulfilled,onRejected) 
                               p.then(value=>{ resolve(value)},reason=>{ reject(reason)})
                            })
                            break 
                        case 'fulfilled': 
                                onFulfilled? 
                                // resolve(onFulfilled(value)) 
                                void (()=>{ 
                                    const p = onFulfilled(value) 
                                    if(!(p instanceof promise)) return resolve(p)  
                                    that.traversePromise(p,resolve,reject)
                                })()
                                : resolve(value)
                                // onFulfilled(value) 
                            break 
                        case 'rejected' :
                                onRejected ?  
                                    // resolve(onRejected(value)) 
                                void (()=>{ 
                                    const p = onRejected(value) 
                                    if(!(p instanceof promise)) return resolve(p)  
                                    that.traversePromise(p,resolve,reject)
                                })()
                                : reject(value) 
                                //onRejected(value)
                            break 
                            
                    }
                }catch(e) { 
                    reject(e) 
                }
              
            })
            
        }

# 四 、实现catch捕获异常函数 #

//catch的思路是捕获上一个then函数中出现的异常，返回的是一个promise
      catch(onRejected) { 
            return this.then(void 0,onRejected) 
      }

# 五 、实现 resolve,reject静态函数 #

//返回一个 'rejected'状态的promise
        static reject(p) {  
            return (p instanceof promise) ? p : new promise((r,j)=>{ 
                j(p)
            })
        }
        
     	 //返回一个 'resolved'状态的promise
        static resolve(p) { 
            return (p instanceof promise) ? p : new promise((r,j)=>{ 
                r(p)
            })
        }

# 六、 实现 race,all函数 #

/** 谁最快就先处理谁 */
        static race(promsies) {  
            if(!promsies) throw new Error('缺少promises参数!')   
            return new promise((resolve,reject)=>{ 
                for(let p of promsies) { 
                    promise.resolve(p)
                    .then(value=>{ 
                        resolve(value)
                    })
                    .catch(err=>{ 
                        reject(err)
                    })
                }
            })
    
        }
    
    
        /** 处理全部的promise,顺利状态按顺序返回结果，有错误状态返回第一个错误，但后面的promise也是执行的 */
        static all(promsies) {   
            if(!promsies) throw new Error('缺少promises参数!')   
            return new promise((resolve,reject)=>{ 
                const resolves = [] 
                let counter = 0 
                for(let i = 0 ;i<promsies.length;++i) {    
                    const p = promsies[i]
                    promise.resolve(p)
                    .then(value=>{ 
                        resolves[i] = value 
                        counter++
                        counter === promsies.length ?  resolve(resolves) : void 0  
                    },reason=>{ 
                         reject(reason)
                    })
                    
                }
            })
         
        }

以上就实现了一款比较简单的promise的版本，相信通过这些代码的练习你对promise的理解已经更加深入！看到这里请给我点个赞吧！原创不易，代码都是我敲到凌晨才出来的。

[https_github.com_Changlon]: https://github.com/Changlon
[promise_a]: https://promisesaplus.com/
[myPromise_github]: https://github.com/Changlon/mypromise