前言

大家好，我是塔塔，面试的时候常被问到封装一个promise，这里提供了一个封装好的promise.js

一、函数封装

function Promise(executor){
  // 添加属性
  this.PromiseState='pending';
  this.PromiseResult=null;
  // 声明一个属性，保存callback函数
  this.callbacks=[];
  // this.callback={};//保存最后一个回调
  // 预先保存实例对象中this的值
  const self=this;

  // resolve函数
  function resolve(data){
    // 状态智能修改一次
    if(self.PromiseState!=='pending') return;
    // 修改对象的状态（PromiseState）
    self.PromiseState='fulfilled';
    // 修改对象的结果（PromiseResult）
    self.PromiseResult=data;
    // 调用成功的回调函数
    // if(self.callback.onResolve){
    //   self.callback.onResolve(data);
    // }
    setTimeout(()=>{
      self.callbacks.forEach(item=>{
        item.onResolve(data);
      })
    })
    

  }
  // reject函数
  function reject(data){
    // 状态智能修改一次
    if(self.PromiseState!=='pending') return;
    // 修改对象的状态（PromiseState）
    self.PromiseState='reject';
    self.PromiseResult=data;
    // 调用失败的回调函数
    // if(self.callback.onReject){
    //   self.callback.onReject(data);
    // }
    setTimeout(()=>{
      self.callbacks.forEach(item=>{
        item.onReject(data);
      })
    })
  }
  try{
    // 同步调用执行器函数
  executor(resolve,reject);
  }catch(e){
    // 修改Promise对象的结果为失败
    reject(e);
  }

}
// 添加then方法
Promise.prototype.then=function(onResolve,onReject){
  const self=this;
  // 判断回调函数参数
  if(typeof onReject!=='function'){
    onReject=reason=>{
      throw reason
    }
  }
  if(typeof onResolve!=='function'){
    onResolve=value=>value
  }
  return new Promise((resolve,reject)=>{
    // 封装函数
    function callback(type) {
      try {
          let result=type(self.PromiseResult);
          if(result instanceof Promise){
            result.then(v=>{
              resolve(v);
            },r=>{
              reject(r)
            })
          }else{
            resolve(result);
          }
      } catch (error) {
        reject(error)
      }
    }

    // 调用回调函数
    if(this.PromiseState==='fulfilled'){
      setTimeout(()=>{
        callback(onResolve);
      })
    }
    if(this.PromiseState==='reject'){
      setTimeout(()=>{
        callback(onReject);
      })
    }
    // 判断pending状态
    if(this.PromiseState==='pending'){
      // 保存回调函数
      // this.callback={
      //   onResolve,
      //   onReject
      // }
      this.callbacks.push({
        // onResolve:onResolve,
        // onReject:onReject
        onResolve:function(){
          // 执行成功的回调函数
          callback(onResolve)
        },
        onReject:function(){
          callback(onReject);
        },
      })
    }
  })

}

// 添加catch方法
Promise.prototype.catch=function(onReject){
  return this.then(undefined,onReject)
}

// Promise.resolve封装
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.reject封装
Promise.reject=function(reason){
  return new Promise((resolve,reject)=>{
    reject(reason);
  })
}

// Promise.reject封装
Promise.all=function(promises){
  return new Promise((resolve,reject)=>{
    // 声明变量
    let count=0;
    let arr=[];
    for(let i=0;i<promises.length;i++){
      promises[i].then(v=>{
        count++;
        arr[i]=v
        if(count===promises.length){
          resolve(arr);
        }
      },r=>{
        reject(r);
      })
    }
  })
}

// Promise.race封装

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);
      })
    }
  })
}

二、class封装

class Promise{
  constructor(executor){
    // 添加属性
    this.PromiseState='pending';
    this.PromiseResult=null;
    // 声明一个属性，保存callback函数
    this.callbacks=[];
    // this.callback={};//保存最后一个回调
    // 预先保存实例对象中this的值
    const self=this;

    // resolve函数
    function resolve(data){
      // 状态智能修改一次
      if(self.PromiseState!=='pending') return;
      // 修改对象的状态（PromiseState）
      self.PromiseState='fulfilled';
      // 修改对象的结果（PromiseResult）
      self.PromiseResult=data;
      // 调用成功的回调函数
      // if(self.callback.onResolve){
      //   self.callback.onResolve(data);
      // }
      setTimeout(()=>{
        self.callbacks.forEach(item=>{
          item.onResolve(data);
        })
      })
      

    }
    // reject函数
    function reject(data){
      // 状态智能修改一次
      if(self.PromiseState!=='pending') return;
      // 修改对象的状态（PromiseState）
      self.PromiseState='reject';
      self.PromiseResult=data;
      // 调用失败的回调函数
      // if(self.callback.onReject){
      //   self.callback.onReject(data);
      // }
      setTimeout(()=>{
        self.callbacks.forEach(item=>{
          item.onReject(data);
        })
      })
    }
    try{
      // 同步调用执行器函数
    executor(resolve,reject);
    }catch(e){
      // 修改Promise对象的结果为失败
      reject(e);
    }

  }
  // 添加then方法
  then(onResolve,onReject){
    const self=this;
    // 判断回调函数参数
    if(typeof onReject!=='function'){
      onReject=reason=>{
        throw reason
      }
    }
    if(typeof onResolve!=='function'){
      onResolve=value=>value
    }
    return new Promise((resolve,reject)=>{
      // 封装函数
      function callback(type) {
        try {
            let result=type(self.PromiseResult);
            if(result instanceof Promise){
              result.then(v=>{
                resolve(v);
              },r=>{
                reject(r)
              })
            }else{
              resolve(result);
            }
        } catch (error) {
          reject(error)
        }
      }

      // 调用回调函数
      if(this.PromiseState==='fulfilled'){
        setTimeout(()=>{
          callback(onResolve);
        })
      }
      if(this.PromiseState==='reject'){
        setTimeout(()=>{
          callback(onReject);
        })
      }
      // 判断pending状态
      if(this.PromiseState==='pending'){
        // 保存回调函数
        // this.callback={
        //   onResolve,
        //   onReject
        // }
        this.callbacks.push({
          // onResolve:onResolve,
          // onReject:onReject
          onResolve:function(){
            // 执行成功的回调函数
            callback(onResolve)
          },
          onReject:function(){
            callback(onReject);
          },
        })
      }
    })
  }
  // 添加catch方法
  catch(onReject){
    return this.then(undefined,onReject)
  }





// Promise.resolve封装
  static resolve(value){
    return new Promise((resolve,reject)=>{
      if(value instanceof Promise){
        value.then(v=>{
          resolve(v)
        },r=>{
          reject(r)
        })
      }else{
        // 状态设置为成功
        resolve(value);
      }
    })

  }

// Promise.reject封装
  static reject(reason){
    return new Promise((resolve,reject)=>{
      reject(reason);
    })
  }

// Promise.reject封装
  static all(promises){
    return new Promise((resolve,reject)=>{
      // 声明变量
      let count=0;
      let arr=[];
      for(let i=0;i<promises.length;i++){
        promises[i].then(v=>{
          count++;
          arr[i]=v
          if(count===promises.length){
            resolve(arr);
          }
        },r=>{
          reject(r);
        })
      }
    })
  }

// Promise.race封装

  static race(promises){
    return new Promise((resolve,reject)=>{
      // 声明变量
      for(let i=0;i<promises.length;i++){
        promises[i].then(v=>{
          resolve(v)
        },r=>{
          reject(r);
        })
      }
    })
  }
}