手写一个Promise完成resolve 和 reject状态的改变和修改属性

1.手写 Promise

1 创建一个文件 Promise.js；内容

function Promise(){

}

2 引入 Promise.js 这个文件

<script src="./Promise.js"></script>
<script type="text/javascript">
    let p = new Promise((resolve, reject) => {
        resolve('ok')
    })
    p.then(res => {
        console.log(res)
    }, err => {

    })
</script>

你会发现上面这个文件会报错，报错的原因是因为：
你引入了这个 Promise.js文件；并且里面的函数是Promise；
它覆盖了全局的Promise；这个是原因1；
还有一个原因是 Promise.js文件中的的函数是Promise；
没有then方法；如果给Promise添加一个then方法，那么就不会报错的哈

3. Promise.js 文件；变为如下

function Promise(){

}
Promise.prototype.then=function(){

}

4.自定义 resolve 和 reject 这样的结构

Promise.js 文件；变为如下

function Promise(executor){
   // 声明成为一个函数,要接受一个形参；因为传递过来的时候有参数
   function resolve(data){

   }

   // 同样声明成为一个函数
   function reject(err){

   }

    // executor会拿到resolve, reject传递过来的函数
    // resolve和reject因为在传递过来的是一个函数，所以在声明的时候，也应该是一个函数哈~
    // 执行器函数在内部是同步调用的
    executor(resolve,reject);
}

Promise.prototype.then=function(onResolve,onReject){

}

5.实现 resolve 和 reject

function Promise(executor){
   function resolve(data){
      //resolve函数主要有两个作用
      // 1 修改对象的状态，Promise;
      // 这个状态是【PromiseStatus】是Promise的一个属性；不同的版本可能是不一样的
      this.PromiseStatus='resolved';//修改Promise的状态为成功

      // 2设置对象的结果；【PromiseValue】是【PromiseStatus】是一个属性；同的版本可能是不一样的
      this.PromiseValue=data;//设置结果
    }

    // 同样声明成为一个函数
    function reject(err){

    }

    // 给Promise添加一个属性pending;
    this.PromiseStatus ='pending' ;
    this.PromiseValue =null;

    executor(resolve,reject);
}
Promise.prototype.then=function(onResolve,onReject){

}

6. 你可能会遇见的坑

1==>当你在控制台输出的时候，你会发现
状态没有发生改变
PromiseStatus=“pending”
PromiseValue=null;
那是因为你的this指向发生了改变

2==>executor不要放在最前面；
executor(resolve,reject);
const self=this;
这样会出问题的哈~
因为 executor(resolve,reject);的时候；会去掉用resolve和reject这两个函数
而resolve函数中此时还没有self；
所以会报错sel出现undefined

7.出坑

function Promise(executor){
    const self=this;
    function resolve(data){
        //resolve函数主要有两个作用
        // 1 修改对象的状态，Promise;
        // 这个状态是【PromiseStatus】是Promise的一个属性；不同的版本可能是不一样的
        // this.PromiseStatus='resolved';//修改Promise的状态为成功 X
        self.PromiseStatus='resolved';

        // 2设置对象的结果；【PromiseValue】是【PromiseStatus】是一个属性；同的版本可能是不一样的
        // this.PromiseValue=data;//设置结果 x
        self.PromiseValue=data;

        // console.log(this);//你会发现这个this是window
    }

    // 同样声明成为一个函数;修改状态
    function reject(err){
        self.PromiseStatus='rejected';
        self.PromiseValue=err;
    }
    // 给Promise添加一个属性pending;
    this.PromiseStatus ='pending' ;
    this.PromiseValue =null;

    executor(resolve,reject);//这个放在后面；它回去调用resolve和reject函数
}
 Promise.prototype.then=function(onResolve,onReject){
 
  }