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

手写一个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“ 来改变失败状态，预期输出打印对象的情况如下，内置的两个属性有相应的状态

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

2. 于是需要在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

示例代码如下（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){

}

实例结果：

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)

运行验证如下：

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