面试官让我手写promise，我这样写，他很满意

朴灿烈づ我的快乐病毒、 2022-12-02 04:14 178阅读 0赞

导语：  
你肯定使用过promise，但是你知道它是怎么实现的吗？它的原理是怎么样的？你能手写一个简单的promise吗？  
在面试中你也可能会被问到手写一个promise，现在来直接手撕原理和代码吧！！

### 本文的目录 ###

*  一，promise的状态
 *  二，仅仅考虑resolve和reject
 *  三，考虑能够链式then
 *  四，考虑链式，也考虑then也可能是返回一个值

# 一，promise的状态 #

promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

一开始的时候就是pending，随后经过操作就会产生出另外两种状态fulfilled和rejected，并且可以通过这两个状态去调用不同的处理函数。

# 二，仅仅考虑resolve和reject #

首先我们先写一个class的构造函数，并且把默认state设置为pending，它的value和reason设置为null。

# 三，考虑能够链式then #

如果要能够进行链式的then，那么肯定是要返回一个promise，才能够这样串联起来。所以我们要对刚刚的代码进行小小的修改，让then执行回调函数的时候，返回一个promise。

这样写后，我们就可以进行链式操作，比如promise.then().then()…，**这样无限串联，解决了回调函数的回调地狱问题。**

# 四，考虑链式，也考虑then也可能是返回一个值 #

class Promise{ 
      constructor(executor){ 
        this.state = 'pending';			//默认的状态，进行中
        this.value = null;				//成功后携带的值
        this.reason = null;				//失败后携带的原因
    	this.onFulfilledCallbacks = []
      	this.onRejectedCallbacks = []
      	
        function resolve(value) { 
          if (this.state === 'pending') { 
            this.state = 'fulfilled';
            this.value = value;
            this.onFulfilledCallbacks.forEach(item => item(this.value))
          }
        };
    
        function reject(reason) { 
          if (this.state === 'pending') { 
            this.state = 'rejected';
            this.reason = reason;
            this.onRejectedCallbacks.forEach(item => item(this.reason))
          }
        };
    
        try{ 
          executor(resolve, reject);		//构造
        } catch (err) { 
          reject(err);
        }
      }
      //then函数根据state来进行后续的回调函数操作
      then(onFulfilled,onRejected) { 		
        if (this.state === 'fulfilled') { 
    	    return new Promise((resolve, reject) => { 
    	      try { 
    	        let f = onFulfilled(self.value)
    	        if (f instanceof Promise) { 
    	          f.then(resolve, reject)
    	        } else { 
    	          resolve(f)
    	        }
    	      } catch (err) { 
    	        reject(err)
    	      }
    	    })
        };
        if (this.state === 'rejected') { 
          	return new Promise((resolve, reject) => { 
    	      try { 
    	        let j = onRejected(self.reason)
    	        if (j instanceof Promise) { 
    	          j.then(resolve, reject)
    	        } else { 
    	          resolve(j)
    	        }
    	      } catch (err) { 
    	        reject(err)
    	      }
    	    })
        };
        if (this.state === 'pending') { 
    	  	return new Promise((resolve, reject) => { 
    	      self.onFulfilledCallbacks.push(() => { 
    	        let f = onFulfilled(self.value)
    	        if (f instanceof Promise) { 
    	          f.then(resolve, reject)
    	        } else { 
    	          resolve(f)
    	        }
    	      })
    	      self.onRejectedCallbacks.push(() => { 
    	        let j = onRejected(self.reason)
    	        if (j instanceof Promise) { 
    	          j.then(resolve, reject)
    	        } else { 
    	          resolve(j)
    	        }
    	      })
    	    })
        }
      }
    }

这样的话promise也能返回一个值，并且被后续的then获取到。