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

深碍√TFBOYSˉ_ 2022-10-30 01:27 177阅读 0赞

##### Promise的封装–手写一个Promise–实现基本结构以及resolve、reject结构功能实现！ #####

**1. 初始结构的搭建**

#####  #####

步骤结构的简介：
      1：在文件夹中新建两个文件，一个index.html作为入口，另外一个promise.js作为封装主体函数
      2：引入自定义的Promise.js，来使用自定义手写的Promise，如果不引入的话，下面实例化的p就是由全局的Promise实例化出来的。
      3：现在我们想要自定义，所以script标签引入来覆盖掉全局的Promise，于是新建Promise.js文件。2.3是标准的实例化Promise的代码结构体，promise内穿一个执行器函数executor，里面含有两个参数 resolve、 reject
      4：新建Promise.js中先定义覆盖新的Promise，这样在左侧new的时候就不是全局的，而是实例自定义的promise
      5：务必注意：Promise实例化的时候会接收一个实参，执行器函数，所以右侧声明的时候会有个形参exexutor
      6:添加原型then方法，注意then方法中接收两个实参，都是方法，所以对应右侧声明时会有两个对应的形参（onResolved，onRejected）

**结构图解：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]  
至此基本的Promise封装结构就搭建好了，执行代码会看到没有报错，所以可以继续进行封装  
**代码如下**

//----------------------index.html代码----------------------------------------------
    <script src="./Promise.js"></script>
    <body>
      <script>
        let p=new Promise((resolve,reject)=>{ 
          resolve('OK');
        })
    
        p.then(value=>{ 
          console.log(value);
        },reason=>{ 
          console.log(reason);
        })
      </script>
    </body>
    //---------------------Promise.js代码---------------------------------
    //声明构造函数
    function Promise(executor){ 
    
    }
    // 添加then方法
    Promise.prototype.then=function(onResolved,onRejectd){ 
    
    }

**2. 封装推进-----resolve与reject代码内部结构搭建**

#####  #####

1：逻辑是：实例化Promise时需要一个执行器函数传入，于是右侧声明时出现了一个形参executor
    2：同时这个形参执行器函数是同步调用执行的，于是exector（）加括号表示立即函数执行。
    3：左侧注意这个执行器函数是有两个参数resolve和reject的，下面还执行了这个reslove函数，同时有参数传进去
    4：于是很自然的，如果不定义这两个函数，那么这个函数体内是无法传入这两个参数的
    5：所以在执行函数的上方，需要定义这两个函数resolve，以及reject，同时二者都有（data）作为参数

逻辑结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]  
代码如下：

// 声明构造函数
    function Promise(executor){ 
      // resolve函数
      function resolve(data){ 
    
      }
      // reject函数
      function reject(data){ 
    
      }
      // 同步调用 -- 执行器函数
      executor(resolve,reject);
    }

**3. 封装推进-----resolve与reject代码内部功能代码实现**

######  ######

先熟知Promise执行器函数中 resolve/reject 的功能作用：
    	1：修改对象的状态(属性promiseState)
    	2：设置对象的结果值（属性promiseResult）
    	（例如：resolve('OK')是将状态改成fulfilled或者resolved，将结果值改成OK），实质都是对两个内置属性的修改

于是要进行属性的添加，状态属性PromiseState的默认值就是常说的pendding状态   对象值默认是null
      // 添加属性,以便下面修改
      this.PromiseState="pendding";
      this.PromiseResult=null;
      // resolve函数
      function resolve(data){ 
        // 1.修改对象的状态
        this.PromiseState="fulfilled";//和resolved一样的含义，都表示成功
        // 2.设置对象的结果值
        this.PromiseResult=data;
      }
      // reject函数
      function reject(data){ 
        // 1.修改对象的状态
        this.PromiseState="rejected";
        // 2.设置对象的结果值
        this.PromiseResult=data;
      }

**小插曲**：按照以上修改去控制改变实例promise中的执行器函数值并不会产生改变，两个属性值不会变化，代码更改如下：

let p=new Promise((resolve,reject)=>{ 
          // resolve('OK');
          reject('error');
        })
        console.log(p)

####  ####

理想的属性结果值应该为：

// 1.修改对象的状态
        this.PromiseState="rejected";
        // 2.设置对象的结果值
        this.PromiseResult=data="error";

![在这里插入图片描述][20210216235807262.png]  
**原因所在：** this的具体指向问题

####  ####

在resolve函数中，this的指向是window而不是上面实例化的Promise对象，导致更改不会起作用
    	解决办法:重新保存实力对象中的this值，或者使用箭头函数

最终代码：

// 声明构造函数
    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;
    
      }
      // 同步调用 -- 执行器函数
      executor(resolve,reject);
    }

实例中仍然使用reject，最终实例结果：

let p=new Promise((resolve,reject)=>{ 
          // resolve('OK');
          reject('error');
        })
        console.log(p)

实例结果：  
![在这里插入图片描述][20210217000207938.png]  
同理：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]

**至此：关于自定与封装Promise中，已经实现了基本结构以及resolve、reject内部代码结构和功能的实现！其他功能见后续封装分享！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221024/2427d74d9f264659bfdadcb370f2b22e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221024/e595d13c05b545ceb42c48ffc9981618.png
[20210216235807262.png]: /images/20221024/b5ad7d1d129243b2ae9f1e95f6d03055.png
[20210217000207938.png]: /images/20221024/efca50fa76364d62a3c19a9b114377b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221024/d1c794f2c2cd432e8cfb85c9ccc46ac3.png