Promise的封装

要封装Promise,首先要了解Promise的使用。

Promise有以下几个特点：1、Promise是一个构造函数 2、实例化Promise时有两个回调函数，resolve,reject ，成功执行resolve,失败执行reject

3、在实例化p的then中有两个对应的回调函数，第一个回调是resolve执行时触发，第二个回调是reject执行时触发4、语法糖catch，就是执行reject的时候，不调用第二个参数，直接链式写catch，像用then一样【 有坑,异步调用resolve,reject不会触发 】5、p.then()是Promise类型，p.catch()是Promise类型

先来个简单的使用实例：

//  使用resolve
let p = new Promise((resolve,reject)=>{
            setTimeout(()=> {
                console.log('延时器代码执行')
                // 执行成功
                resolve('执行成功')
            },1000)
        })
        p.then(res=>{
            console.log(res)  //执行成功
        })

//  使用reject
let p = new Promise((resolve,reject)=>{
            setTimeout((res)=> {
                // 模拟执行出错
                if(!res){
                    // 没有给res传参
                    return reject('执行出错，没有参数')
                }
                console.log('延时器代码执行')
            },1000)
        })
        p.then(res => {
            console.log(res)  //执行成功
        },error => {
            console.log(error) //'执行出错，没有参数'  执行出错执行
　　　　})

封装同步的Promise

 function myPromise(callback) { //callback 代表( resolve,reject ) => {}
        // 默认状态pending，首先没有执行成功或失败函数之前状态是pending
        (this.promiseStatus = 'pending'), this.msg;
　　　　　// 用that存当前this的内容
        let that = this
        // new 自动执行 , 调用callback
        callback(
　　　　　　// 定义resolve
          function() {
            // 这里面的arguments,this都是坑，他们两个都是坑人大咖，两个都是不定值
            that.promiseStatus = 'resolved';
            // resolve 的第一个实参
            that.msg = arguments[0];
          },
　　　　　　　// 定义reject
          function() {
            that.promiseStatus = 'rejected';
            // rejected 的第一个实参
            that.msg = arguments[0];
          }
        );
      }
      // 往myPromise 原型上添加then方法
      myPromise.prototype.then = function() {
        // 这里的this就是让实例调用，指向实例的，并不是指向构造函数!!! 花式秀this
        if (this.promiseStatus == 'resolved') {
          arguments[0](this.msg);
        } else if (this.promiseStatus == 'rejected') {
          arguments[1](this.msg);
        }
      };
      // 实例化
      const p = new myPromise((resolve, reject) => {
        reject('失败')
      });
        
      // 使用then
      p.then(
       function (res) {
         console.log(res); 
       },
       function (err) {
         console.log(err);
       }
      );

代码的思路我会尽量写详细写，以及一些容易出错的地方，想了几个小时才发现。。。。。。（无地自容）

  arguments和this值得分析分析。首先是arguments,一开始想省事直接谢了()=>{}代替function(){},乖乖，好了，接下来的1个小时就是找bug时间，()=>{ this.promiseStatus;this.msg = arguments[0] } 请大家尽情笑话我，当时没有意识到箭头函数的this是指向上层的this，且不变的，由于arguments和this一样有不确定性，所以也是指向上层，所以一直纠结为什么arguments不是箭头函数()=>{ this.promiseStatus;this.msg = arguments[0] } 中 ()里的实参，而是一直是callback ，所以还是老老实实换成function(){this.promiseStatus;this.msg = arguments[0]}

  this引出的2个小时的挠头疯狂：刚开始并没有发现是this的问题，而是封装完了，运行的时候，不管我在实例里调用resolve还是reject都没有打印效果，p.then()调用也没问题，然后找了then方法的定义位置，没错啊，上面callback定义的两个resolve,reject实参函数体我也各自修改了状态，单词也没写错，1个多小时过后我终于想看看是不是状态没改变，导致then定义方法里的if没执行，果然不管在实例的时候调用resolve还是reject，状态都是pending,没变过，没道理啊，我眼花了？我继续往上找，我忽然想起了刚才的argument，忽然面色暗淡，用颤抖的双手打印了function(){}里的this,呵,window。也就是根本就没变过实例里的promiseStatus属性，所以用that存下当前的this，值得一提的是用箭头函数this就不用that存了，原因在上一段，但是arguments必须又要function(){  }的形式......

异步执行resolve,reject

function myPromise(callback) { //callback 代表( resolve,reject ) => {}
        // 默认状态pending，首先没有执行成功或失败函数之前状态是pending
        this.promiseStatus = 'pending',
        this.status = [],  //异步时起作用
        this.msg;
　　　　　// 用that存当前this的内容
        let that = this
        // new 自动执行 , 调用callback
        callback(
　　　　　　// 定义resolve
          function() {
            that.promiseStatus = 'resolved';
            // resolve 的第一个实参
            that.msg = arguments[0];
            //判断存不存在resolve方法  {  } 
            for (const {resolve} of that.status) {
                resolve(that.msg)
            }
          },
　　　　　　　// 定义reject
          function() {
            that.promiseStatus = 'rejected';
            // rejected 的第一个实参
            that.msg = arguments[0];
            for (const {reject} of that.status) {
                reject(that.msg)
            }
          }
        );
      }
      // 往myPromise 原型上添加then方法
      myPromise.prototype.then = function() {
        // 这里的this就是让实例调用，指向实例的，并不是指向构造函数!!! 花式秀this
        if (this.promiseStatus == 'resolved') {
          arguments[0](this.msg);
          console.log('1234');
          
        } else if (this.promiseStatus == 'rejected') {
          arguments[1](this.msg);
        }else{
            this.status.push({ resolve:arguments[0],reject:arguments[1] })  //实例参数有异步语句的会先执行then
            console.log('yyy');
        }
      };
      // 实例化

      //对于实例化的异步我个人理解为new的过程是这样的，首先打印123是同步的setTimeout本身是同步的,里面的回调是异步的，是异步就给我等等，先执行then（），由于是自己封装的then（）
　　　　是以原型方法存在，同步调用，调用以后status就变成了[{ resolve:arguments[0],reject:arguments[1] }],然后回过头执行setTimeout里的reject，这时候status有了reject
a      所以可以调用then里面的两个回调也就拿到参数:这里我想了好久。终于想明白了 同步then里面两个回调是在then中执行，异步是在定义构造函数的callback中的第一个或第二个参数定义中执行。

      //所以在构造函数callback()已经完成，此时还没运行异步的reject或reject,因为只是声明函数未执行，当调用
      const p = new myPromise((resolve, reject) => {
          setTimeout(reject,100,'调用失败')
          console.log(123)
      });
      // 使用then
      p.then(
       function (res) {
         console.log(res); 
       },
       function (err) {
         console.log(err);
       }
      );

有一个问题想了很久，在异步执行resove或reject的时候，setTimeout(   )会不会执行？是先执行setTimeout(   )再执行then还是先执行then，回过头来执行setTimeout，事实上是先执行then的。紧接着then调用了一次，而那一次由于异步调用所以运行this.status.push({ resolve:arguments[0],reject:arguments[1] })，然后执行异步的reject没错。但是这时候还要执行一次then吗？不执行的话，then里面两个参数没法调用，只是声明，执行的话就执行两次then有点说不过去

因为问题想了很久，后来才发现很简单。所以要回顾一下

这里主要说的是异步执行resolve,reject，同步和上面没区别，也用不到status。

其实把还是在执行顺序的问题上。首先执行new的操作，直接进入构造函数执行一遍，接着看到了异步操作和同步操作，先执行同步的打印123没话讲，异步操作呆一边去先。往下走执行then( )然后这一步因为new中异步执行reject（以代码来说）,所以status就有了一个[{reject:arguments[1]}],此时再去执行new中的reject函数就会执行（不要误以为执行setTimeout，是里面的回调是异步的）callback对应的第二个参数（函数体），在第二个函数体中for (const {reject} of that.status) {reject(that.msg)}  给then里的第二个参数（也是函数体）传了实参，所以才能打印出来。

归根结底   同步执行then的两个函数参数是在原型中的then方法定义中。

　　　　　异步执行then的两个函数参数是在构造函数callback的两个函数参数中。