手写promise

。

现代浏览器支持已经支持了promise，下面我用Cpromise类来重新写一个promise，探索一下promise实现的原理：

直接上代码：

/*
  Cpromise:构造函数
  excutor:内部同步执行函数  (resolve,reject) => {}
*/

function Cpromise (excutor){
  this.state = 'pendding';//promise状态
  this.value = undefined;//正产返回值
  this.reason = undefined;//异常返回值
  this.resolveCallbacks = [];//正常状态回调队列
  this.rejectedCallbacks = [];//异常状态回调队列

  let resolve = value => {//正常执行函数
    // console.log(this.state,"resolve函数执行");
    if(this.state === 'pendding'){
      this.state = 'fulfilled';//promise状态变为正常状态
      this.value = value;//拿到正常返回值
      this.resolveCallbacks.forEach( fn => fn());//执行正常回调队列中的方法
    }
  };

  let reject = reason =>{//异常执行函数
    // console.log(this.state,"reject函数执行");
    if(this.state === 'pendding'){
      this.state = "rejected";//promise状态变为异常
      this.reason = reason;//拿到异常返回值
      this.rejectedCallbacks.forEach( fn => fn() );//执行异常回调队列里的方法
    }
  }

  try{
    // console.log("开始执行excutor函数");
    excutor(resolve,reject);//同步执行函数
  }catch(err){
    reject(err);
  }
}

Cpromise.prototype.then = function(onFulfilled,onRejected){
  // promise的then方法返回一个promise对象
  // console.log("执行then方法");
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;//设置then方法的默认正常回调
  onRejected = typeof onRejected === 'function' ? onRejected : err => {throw err};//设置then方法的默认异常回调
  let cpromise2 = new Cpromise((resolve,reject) => {
    if(this.state === 'fulfilled'){//then方法执行时，promise返回正常值时，直接执行then的正常回调
      // console.log("onFulfilled方法执行");
      setTimeout(() => {
        try {
          let x = onFulfilled(this.value);//执行then中的正常回调
          resolvePromise(cpromise2,x,resolve,reject);//执行resolve
        } catch (e) {
          reject(e)
        }
      },0)
    }

    if(this.state === 'rejected'){//then方法执行时，promise返回异常值时，直接执行then的异常回调
      // console.log("onRejected方法执行");
      setTimeout(() => {
        try {
          let x = onRejected(this.reason);//执行then中的异常回调
          resolvePromise(cpromise2,x,resolve,reject);//执行resolve
        } catch (e) {
          reject(e)
        }
      },0)
    }

    if(this.state === 'pendding'){//then方法执行时，同步函数体中的resolve或reject还没执行时，把then内的正常回调和异常回调放到各自的队列中，等待执行
      // console.log("向正常|异常回调队列添加回调");
      this.resolveCallbacks.push(() => {
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);//执行then中的正常回调
            resolvePromise(cpromise2,x,resolve,reject);//执行resolve
          } catch (e) {
            reject(e);
          }
        },0)
      });
      this.rejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);//执行then中的异常回调
            resolvePromise(cpromise2,x,resolve,reject);//执行resolve
          } catch (e) {
            reject(e);
          }
        },0)
      })
    }
  });
  return cpromise2;
}

function resolvePromise(promise2,x,resolve,reject){//把正常|异常值放到 then方法返回出去的promise的返回值中
  if( x === promise2 ){
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  let called;
  if(x != null && (typeof x === 'object' || typeof x === 'function')){
    try {
      let then = x.then;
      if(typeof then === 'function'){//如果x是promise对象 就采用x这个promise对象的结果
        then.call(x,y => {
          if(called) return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);//递归一下 y有可能还是promise对象   then方法内的promise对象都返回结果后，将结果返回给最外层的then的promise对象，然后返回(resolve|reject)出去
        },err => {
          if(called) return;
          called = true;
          reject(err);
        })
      }else{//如果不是promise 返回x
        resolve(x);
      }
    } catch (e) {
      if(called)return;
      called = true;
      reject(e); 
    }
  }else{//如果不是函数  返回 x
    resolve(x);
  }
}
// catch方法 then方法的语法糖
Cpromise.prototype.catch = function(callback){
  return this.then(null,callback);
}
// resolve方法
Cpromise.resolve = function(val){
  return new Cpromise((resolve,reject) => {
    resolve(val);
  })
}
// reject方法
Cpromise.reject = function(val){
  return new Cpromise((resolve,reject) => {
    reject(val);
  })
}

// race方法
Cpromise.race = function(promises){
  return new Cpromise((resolve,reject) => {
    for(let i = 0;i < promises.length;i++){
      promises[i].then(resolve,reject);//谁先执行完，就返回谁
    }
  })
}

// all方法
Cpromise.all = function(promises){
  let arr = [];
  let i = 0;
  function processData(index,data,resolve){
    arr[index] = data;
    i++;
    if(i === promises.length){
      resolve(arr);
    }
  }
  return new Cpromise((resolve,reject) => {
    for(let i = 0;i < promises.length;i++){
      promises[i].then(data => {
        processData(i,data,resolve);
      },reject);
    }
  })
}

// 测试
let p = new Cpromise((resolve,reject) => {
  let random = Math.floor(Math.random()*10);
  if(random > 5){
    resolve(random)
  }else{
    reject(random)
  }
})
p.then(data => {
  console.log(data,"resolve");
}).catch(err => {
  console.log(err,"catch");
})


let p1 = new Cpromise((resolve,reject) => {
  setTimeout(() => {
    resolve(1000);
  },1000)
})

let p2 = new Cpromise((resolve,reject) => {
  setTimeout(() => {
    resolve(2000);
  },2000)
})

let pAll = Cpromise.all([p1,p2]).then(result => {
  console.log(result,"all");
})

let pRace = Cpromise.race([p1,p2]).then(result => {
  console.log(result,"race");
})

let pResolve =  Cpromise.resolve("resolve");
pResolve.then(data => {
  console.log(data,"resolve");
})

let pReject = Cpromise.reject("reject");
pReject.then(data => {
  console.log(data);
},err => {
  console.log(err,"reject");
})

测试了一下，可以正常使用，

说以下自己的大致理解：

promise，主要把异步函数变成同步执行，避免了回调地狱

原理其实还是用了回调函数，

promise类内部有 

状态变量 state  3个状态：pendding(正在执行)、fulfilled(正常返回)、rejected(异常返回)

正常返回值变量：value

异常返回值：reason

正常返回回调 resolve

异常返回回调 reject

正常回调队列 resolveCallbacks

异常回调队列 rejectCallbacks

promise接收一个同步执行函数参数 excutor，实例化时执行此函数，执行时会把内部的resolve和reject函数作为参数传到excutor内；

当excutor函数执行，状态冲pendding--->fulfilled 或 pendding --->rejected 时，分别执行 resolve和reject，从而将返回值传到then方法内

函数执行顺序excutor、then

当excutor内部不是异步函数时，then方法执行时，promise的状态已经变成了fullfilled或rejected，then方法就会直接执行then方法的正常回调或异常回调

如果excutor是异步函数，then方法执行时，promise状态是pendding状态，这时，then方法会把then的两个回调分别放到promise内部的正常回调队列和异常回调队列中，等待excutor内部resolve或reject的执行，这两个方法会做如下事情：将状态改成成功或失败状态，将正常返回值赋值给value变量，或者把异常原因返回给reason，然后，执行对应队列中的方法。

另外.then方法是可以链式调用的，需要then返回的是一个promise对象，假如then里的两个回调参数也是返回的promise对象，这里就需要做一些处理

then方法会把then回调函数执行后得到的值，传给then本身的promise作为返回值，如果then内部是promise则，需要把回调函数promise的返回值传给then本身的promise的返回值，这样才是正常的。

所以有一个resolvePromise函数，这里判断then内的回调是不是promise对象，如果是，则拿到then回到函数promise的返回值后再通过then本身的promise的resolve将值返回出去，如果then的回调不是promise对象，则直接把回调函数的返回值或一个基础值作为返回值传给then本身的promise。总结一下，then本身的promise要从回调内拿到返回值，二者个回调有可能是一个函数的返回值，也有可能是一个promise对象的返回值，也有可能是多个promise嵌套的返回值。具体处理看上诉代码。

。