经典Promise面试题----手写Promise详细步骤（二）

阳光穿透心脏的1/2处 2022-10-30 10:24 126阅读 0赞

#### 手写一个Promise的封装承接上文继续进行： ####

上文实现功能：
    	功能1：搭建Promise基本结构实现
    	功能2：resolve、reject结构功能实现
    	链接直达：https://blog.csdn.net/czj1049561601/article/details/113829149#comments_15053958

本文实现封装功能：
    	功能1：throw抛出异常改变promise状态功能实现
    	功能2：确保Promise状态只能修改一次的功能实现

1.  throw抛出异常改变Promise对象的状态

####  ####

前情介绍：
    	改变Promise对象状态的方式有三种：
    		1：调用resolve(' ok ') 
    		2:  调用reject(' error')
    		3:  通过抛出异常来改变，语法上来说，等同与reject 会把对象状态改变为失败

###### 明确目的： ######

正常来说，console的promise对象p 应该是一个失败的状态
    同上篇博文介绍，利用throw ”error“ 来改变失败状态，预期输出打印对象的情况如下，内置的两个属性有相应的状态

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

let p=new Promise((resolve,reject)=>{ 
          // resolve('OK');
          // reject('error');
          // 抛出异常
          throw "error" //在promise执行器函数中执行的
        })
        console.log(p)

1.  于是需要在Promise.js中做相应的封装处理来实现：

####  ####

思路：
    	1：一看到throw，就应该想到try...catch 来处理这个抛出的异常
    	2：于是下一个问题：try..catch 加在代码的那个位置？
    		throw ”error " 是在promise执行器函数中执行的，于是promise.js中有如下封装

###### 逻辑思路展示（重点）： ######

1：实例对象p中抛出异常，期望改变promise状态为失败，内部封装处理时是在执行器函数执行时
    	2：throw出的erro直接作为参数传进catch中，然后调用reject直接来改变状态，同上一篇中的resolve/reject 功能实现！
     	3：链接直达：https://blog.csdn.net/czj1049561601/article/details/113829149#comments_15053958

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]  
示例代码如下（resolve/reject代码片段也放进来，原理见上一篇分析）：

// 声明构造函数
    function Promise(executor){ 
      // 添加属性,以便下面修改
      this.PromiseState="pendding";
      this.PromiseResult=null;
      // 保存实例对象的 this 的值
      const self=this;
      // resolve函数
      function resolve(data){ 
        // 1.修改对象的状态
        self.PromiseState="fulfilled";//和resolved一样的含义，都表示成功
        // 2.设置对象的结果值
        self.PromiseResult=data;
      }
      // reject函数
      function reject(data){ 
        // 1.修改对象的状态
        self.PromiseState="rejected";
        // 2.设置对象的结果值
        self.PromiseResult=data;
      }
      try{ 
        // 同步调用 -- 执行器函数
        executor(resolve,reject);
      }catch(err){ 
        // 修改 promise 对象的状态为失败
        reject(err);
      }
    }
    // 添加then方法
    Promise.prototype.then=function(onResolved,onRejectd){ 
    
    }

实例结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]

1.  验证对比

####  ####

可以去掉代码中的script引用，来使用内部的promise，而非自定义的查看效果，结果相同！

<title>Promise封装</title>
    //<script src="./Promise.js"></script>//注释掉这里，重新运行进行对比
      <script>
        let p=new Promise((resolve,reject)=>{ 
          // resolve('OK');
          // reject('error');
          // 抛出异常
          throw "error"
        })
        console.log(p)
      </script>

**4. 封装继续----确保状态只能修改一次**

#### 逻辑思路 ####

思路很简单：在改变状态之前进行相应的判断即可，在resove / reject 封装代码中加入如下判断确保状态单次更改

// 判断状态
        if(self.PromiseState !== 'pendding') return;

// resolve函数
      function resolve(data){ 
        // 判断状态
        if(self.PromiseState !== 'pendding') return;
        // 1.修改对象的状态
        self.PromiseState="fulfilled";//和resolved一样的含义，都表示成功
        // 2.设置对象的结果值
        self.PromiseResult=data;
      }

完整代码如下：

//------------------------------Promise.js代码---------------------------
    // 声明构造函数
    function Promise(executor){ 
      // 添加属性,以便下面修改
      this.PromiseState="pendding";
      this.PromiseResult=null;
      // 保存实例对象的 this 的值
      const self=this;
      // resolve函数
      function resolve(data){ 
        // 判断状态
        if(self.PromiseState !== 'pendding') return;
        // 1.修改对象的状态
        self.PromiseState="fulfilled";//和resolved一样的含义，都表示成功
        // 2.设置对象的结果值
        self.PromiseResult=data;
      }
      // reject函数
      function reject(data){ 
        // 判断状态
        if(self.PromiseState !== 'pendding') return;
        // 1.修改对象的状态
        self.PromiseState="rejected";
        // 2.设置对象的结果值
        self.PromiseResult=data;
      }
      try{ 
        // 同步调用 -- 执行器函数
        executor(resolve,reject);
      }catch(err){ 
        // 修改 promise 对象的状态为失败
        reject(err);
      }
    }
    // 添加then方法
    Promise.prototype.then=function(onResolved,onRejectd){ 
    
    }
      }

演示结果：

#####  #####

同时存在resolve（”OK“）以及 reject （” error“）来判断Promise状态是否单次执行

let p = new Promise((resolve, reject) => { 
          resolve('OK');//更换二者位置进行验证如下，符合预期结果，封装成功。
          reject('error');
          // 抛出异常
          // throw "error"
        })
        console.log(p)

运行验证如下：  
![在这里插入图片描述][20210219002930814.png]  
![在这里插入图片描述][20210219003039768.png]

#### 上述封装均符合文章开篇的预期结果，比较简单，逻辑明白即可！其他功能封装继续！ ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221024/1d6e973ffa41457a848d589e10bd8333.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221024/b3700ae3893447b58be6c78769fc571b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221024/16f4eb0ccebc44a0b6a404a65e49263c.png
[20210219002930814.png]: /images/20221024/3673aa8938734b6c8f88445652ec8ef5.png
[20210219003039768.png]: /images/20221024/11145ca6853e4d3c8b4d1af7dc4f398b.png