[JavaScript知识库]Promise实现

Promise实现

整体代码

/*自定义Promise函数模块：IIFE */

(function (window) {

  //Promise构造函数
  //executor：执行器函数(同步执行)
  function Promise(executor) {

     //将当前promise对象保存起来    
    const self = this

    self.PromiseState = 'pending' //给promise对象指定PromiseState属性, 初始值为pending
    self.PromiseResult = null //给promise对象指定一个用于存储结果数据的属性
    self.callbacks = [] //每个元素的结构：{ onResolved() {}, onRejected() {}},数组里面是一个一个的对象，每一个对象来自一个then方法，一个对象中有两个回调函数：onResolved 和 onRejected

    function resolve(value) {
      //如果当前状态不是pending,直接结束
      if(self.PromiseState !== 'pending') {
        return
      }

      //将装填改为fulfilled
      //这里要把this改成self，因为(this)是window对象调用了resolve函数，而我们本意上是想让Promise对象调用
      self.PromiseState = 'fulfilled'
      //保存value数据
      self.PromiseResult = value
      
      //这里是执行then方法中的回调函数，为了能拿到then中的回调函数，用一个数组callbacks[]将回调函数存起来
      //如果有待执行的callback函数,立即异步执行回调函数onResolved
      if (self.callbacks.length>0) {
        //这里执行的是then方法中的回调函数，then方法中的回调函数是异步执行的，所以要放入定时器中执行
        setTimeout(() => { //放入队列中执行所有成功的回调
          self.callbacks.forEach(callbacksObj => {
            callbacksObj.onResolved(value)
          })
        });
      }
    }

    function reject(reason) {
      //如果当前状态不是pending,直接结束
      if(self.PromiseState !== 'pending') {
        return
      }
      //将装填改为resolved
      self.PromiseState = 'rejected'
      //保存value数据
      self.PromiseResult = reason
      //如果有待执行的callback函数,立即异步执行回调函数onRejected
      if (self.callbacks.length>0) {
        setTimeout(() => { //放入队列中执行所有成功的回调
          self.callbacks.forEach(callbacksObj => {
            callbacksObj.onRejected(reason)
          })
        });
      }
    }

    //立即同步执行executor
    try {
      executor(resolve, reject)
    } catch (error) { //如果执行器抛出异常,promise对象变为rejected状态
      reject(error)
    }
  }

  /*
  *Promise原型对象的then()
  指定成功和失败的回调函数
  返回一个新的promise对象
  注意：then方法中的回调函数是异步执行的
  */
  Promise.prototype.then = function (onResolved, onRejected) {
    
    const self =this;
    //判断回调函数参数
    //内置的Promise允许对象只传入一个参数，也就是不传入onRejected函数
    if(typeof onRejected !== 'function'){
      onRejected = reason => {
        throw reason;
      }
    }

    //当不传入onResolved时，
    if(typeof onResolved !== 'function'){
      onResolved = value => value;
      //等同于  value => {return value};
    }


    //then方法返回的是一个Promise对象
    return new Promise((resolve,reject) => {

        //封装函数
        function callback(type){
          try{
            //执行onResolved函数的实参是promise对象返回的结果，其实就是PromiseResult
            let result = type(self.PromiseResult);
            //用result获取回调函数的执行结果

            //判断
            if(result instanceof Promise){
              //如果是Promise类型的对象，直接调用then方法
              result.then(
                v => {
                  resolve(v);
                },
                r => {
                  reject(r);
                }
              )

            }else{
              //返回的结果如果不是一个Promise对象
              //设置结果的对象状态为成功
              resolve(result);
            }
          }catch(e){
              reject(e);
          }
        }

        //调用回调函数 PromiseState
        if(this.PromiseState === 'fulfilled'){
          //then方法中的回调函数是异步执行的
          setTimeout(() => {
            callback(onResolved)
          })
          
        }
        if(this.PromiseState === 'rejected'){
          //then方法中的回调函数是异步执行的
          setTimeout(() => {
            callback(onRejected)
          })
        }

        //判断pending 状态
        if(this.PromiseState === 'pending'){
          //保存回调函数,将这些函数推入数组中后，会在上面的Promise对象的setTimeout里面的resolve里面执行
          this.callbacks.push({
            onResolved: function() {

              callback(onResolved)
            },
            onRejected: function() {
              callback(onRejected)
              
            }
          });
        }
    })
  }


  /*
  *Promise原型对象的catch()
  指定失败的回调函数
  返回一个新的promise对象
  */
  Promise.prototype.catch = function (onRejected) {
    return this.then(undefined,onRejected);
  }


  /* 
  *Promise函数对象的resolve方法
  返回一个指定结果的成功的promise,
  */
  Promise.resolve = function (value) {
    return new Promise((resolve,reject) => {
      if(value instanceof Promise){
        value.then(v=>{
          resolve(v);
        },r=>{
          reject(r)
        })
      }else{
        //状态设置为成功
        resolve(value)
      }
    })
  }


  /*
  *Promise函数对象的rejected方法
  返回一个指定reason的失败的promise
  */
  Promise.rejected = function (reason) {
    return new Promise((resolve,reject) => {
      reject(reason)
    })
  }


  /*
  *Promise函数对象的all方法
  返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败的就失败
  成功的结果是所有promise的成功结果的数组
  */
  Promise.all = function (promises) {
    return new Promise((resolve,reject)=>{
      //声明变量
      let count=0;
      let arr=[];//所有promise的成功结果的数组
      //遍历
      for(let i=0;i<promises.length;i++){
        promises[i].then(v=>{
            //得知对象的装啊提是成功
            //每个promise对象 都成功
            count++;
            
            //将当前promise对象成功的结果 存入到数组中
            arr[i]=v;
            //判断
            if(count === promises.length){
              //修改状态
              resolve(arr);
            }

          },
          r=>{
            reject(r);
        })
      }
    })
  }



  /*
  *Promise函数对象的race方法
  返回一个promise,其结果由第一个完成的promise决定
  */
  Promise.race = function (promises) {
    return new Promise((resolve,reject) => {
      for(let i=0;i<promises.length;i++){
        promises[i].then(v=>{
          //修改返回对象的状态为成功
          resolve(v);
        },r=>{
          //修改返回对象的状态为失败
          reject(r);
        })
      }
    })
  }

  //向外暴露Promise函数
  window.Promise = Promise
})(window)

executor：执行器函数(同步执行)

//Promise构造函数
  //executor：执行器函数(同步执行)
  function Promise(executor) {

     //将当前promise对象保存起来    
    const self = this

    self.PromiseState = 'pending' //给promise对象指定PromiseState属性, 初始值为pending
    self.PromiseResult = null //给promise对象指定一个用于存储结果数据的属性
    self.callbacks = [] //每个元素的结构：{ onResolved() {}, onRejected() {}},数组里面是一个一个的对象，每一个对象来自一个then方法，一个对象中有两个回调函数：onResolved 和 onRejected

    function resolve(value) {
      //如果当前状态不是pending,直接结束
      if(self.PromiseState !== 'pending') {
        return
      }

      //将装填改为fulfilled
      //这里要把this改成self，因为(this)是window对象调用了resolve函数，而我们本意上是想让Promise对象调用
      self.PromiseState = 'fulfilled'
      //保存value数据
      self.PromiseResult = value
      
      //这里是执行then方法中的回调函数，为了能拿到then中的回调函数，用一个数组callbacks[]将回调函数存起来
      //如果有待执行的callback函数,立即异步执行回调函数onResolved
      if (self.callbacks.length>0) {
        //这里执行的是then方法中的回调函数，then方法中的回调函数是异步执行的，所以要放入定时器中执行
        setTimeout(() => { //放入队列中执行所有成功的回调
          self.callbacks.forEach(callbacksObj => {
            callbacksObj.onResolved(value)
          })
        });
      }
    }

    function reject(reason) {
      //如果当前状态不是pending,直接结束
      if(self.PromiseState !== 'pending') {
        return
      }
      //将装填改为resolved
      self.PromiseState = 'rejected'
      //保存value数据
      self.PromiseResult = reason
      //如果有待执行的callback函数,立即异步执行回调函数onRejected
      if (self.callbacks.length>0) {
        setTimeout(() => { //放入队列中执行所有成功的回调
          self.callbacks.forEach(callbacksObj => {
            callbacksObj.onRejected(reason)
          })
        });
      }
    }

    //立即同步执行executor
    try {
      executor(resolve, reject)
    } catch (error) { //如果执行器抛出异常,promise对象变为rejected状态
      reject(error)
    }
  }

then方法实现

/*
  *Promise原型对象的then()
  指定成功和失败的回调函数
  返回一个新的promise对象
  注意：then方法中的回调函数是异步执行的
  */
  Promise.prototype.then = function (onResolved, onRejected) {
    
    const self =this;
    //判断回调函数参数
    //内置的Promise允许对象只传入一个参数，也就是不传入onRejected函数
    if(typeof onRejected !== 'function'){
      onRejected = reason => {
        throw reason;
      }
    }

    //当不传入onResolved时，
    if(typeof onResolved !== 'function'){
      onResolved = value => value;
      //等同于  value => {return value};
    }


    //then方法返回的是一个Promise对象
    return new Promise((resolve,reject) => {

        //封装函数
        function callback(type){
          try{
            //执行onResolved函数的实参是promise对象返回的结果，其实就是PromiseResult
            let result = type(self.PromiseResult);
            //用result获取回调函数的执行结果

            //判断
            if(result instanceof Promise){
              //如果是Promise类型的对象，直接调用then方法
              result.then(
                v => {
                  resolve(v);
                },
                r => {
                  reject(r);
                }
              )

            }else{
              //返回的结果如果不是一个Promise对象
              //设置结果的对象状态为成功
              resolve(result);
            }
          }catch(e){
              reject(e);
          }
        }

        //调用回调函数 PromiseState
        if(this.PromiseState === 'fulfilled'){
          //then方法中的回调函数是异步执行的
          setTimeout(() => {
            callback(onResolved)
          })
          
        }
        if(this.PromiseState === 'rejected'){
          //then方法中的回调函数是异步执行的
          setTimeout(() => {
            callback(onRejected)
          })
        }

        //判断pending 状态
        if(this.PromiseState === 'pending'){
          //保存回调函数,将这些函数推入数组中后，会在上面的Promise对象的setTimeout里面的resolve里面执行
          this.callbacks.push({
            onResolved: function() {

              callback(onResolved)
            },
            onRejected: function() {
              callback(onRejected)
              
            }
          });
        }
    })
  }

catch方法实现

  /*
  *Promise原型对象的catch()
  指定失败的回调函数
  返回一个新的promise对象
  */
  Promise.prototype.catch = function (onRejected) {
    return this.then(undefined,onRejected);
  }

resolve方法实现

  /* 
  *Promise函数对象的resolve方法
  返回一个指定结果的成功的promise,
  */
  Promise.resolve = function (value) {
    return new Promise((resolve,reject) => {
      if(value instanceof Promise){
        value.then(v=>{
          resolve(v);
        },r=>{
          reject(r)
        })
      }else{
        //状态设置为成功
        resolve(value)
      }
    })
  }

reject方法实现

  /*
  *Promise函数对象的rejected方法
  返回一个指定reason的失败的promise
  */
  Promise.rejected = function (reason) {
    return new Promise((resolve,reject) => {
      reject(reason)
    })
  }

all方法实现

  /*
  *Promise函数对象的all方法
  返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败的就失败
  成功的结果是所有promise的成功结果的数组
  */
  Promise.all = function (promises) {
    return new Promise((resolve,reject)=>{
      //声明变量
      let count=0;
      let arr=[];//所有promise的成功结果的数组
      //遍历
      for(let i=0;i<promises.length;i++){
        promises[i].then(v=>{
            //得知对象的装啊提是成功
            //每个promise对象 都成功
            count++;
            
            //将当前promise对象成功的结果 存入到数组中
            arr[i]=v;
            //判断
            if(count === promises.length){
              //修改状态
              resolve(arr);
            }

          },
          r=>{
            reject(r);
        })
      }
    })
  }

race方法实现

  /*
  *Promise函数对象的race方法
  返回一个promise,其结果由第一个完成的promise决定
  */
  Promise.race = function (promises) {
    return new Promise((resolve,reject) => {
      for(let i=0;i<promises.length;i++){
        promises[i].then(v=>{
          //修改返回对象的状态为成功
          resolve(v);
        },r=>{
          //修改返回对象的状态为失败
          reject(r);
        })
      }
    })
  }