手写promise

//三种状态
const PENDING = 'pending' // 等待
const FUlFILLED = 'fulfilled' //成功
const REJECTED = 'rejected' //失败
 
//定义MyPromise类
class MyPromise{
  //在构造函数,定义一个执行器,实例化对象时立即执行
  constructor(executor){
    try {
      executor(this.resolve,this.reject)
    } catch (error) {
      this.reject(e)
    }
  }
  //定义初始状态为等待
  status = PENDING;
  //定义成功返回值
  value = undefined;
  //定义失败原因
  reason = undefined;
  //初始化成功函数 ,后续会出现多次调用,定为数组
  successCallback = [];
  //初始话失败函数
  failCallback = [];
  //定义resolve函数:更改状态为成功,使用箭头函数,使的this指向实例化对象而非window或undefined
  resolve = value =>{
    //一旦更改状态不可再次修改
    if(this.status !== PENDING) return;
    this.value = value;//存储value到当前内存中
    this.status = FUlFILLED;//更改状态为成功状态
    while (this.successCallback.length){
      //判断成功回调是否存在 如果存在 调用
      this.successCallback.shift()(this.value);
    }
  }
  //定义rejected函数:更改状态为失败
  reject = reason =>{
    if(this.status !== PENDING) return;
    this.reason = reason;//存储value到当前内存中
    this.status = REJECTED;//更改为失败状态
    while (this.failCallback.length){
      //判断成功回调是否存在 如果存在 调用
      this.failCallback.shift()(this.reason);
    }
  }
  //定义then方法,有两个回调函数,分别时成功回调successCallBack,失败回调failCallBack
  then = (successCallback,failCallback) =>{
    //将then的方法参数编程可选参数
    successCallback = successCallback?successCallback:value =>value;//普通值或回调函数
    failCallback && failCallback?failCallback:reason =>{throw reason};//回调函数或抛出异常
    //链式调用 ,将值给下一个then方法,而then接收的时promise对象
    //实例化另一个promise2对象,并将函数放入执行器中立即调用
    //根据调用的时resolve还是reject执行相应的回调函数
    let promise2 = new MyPromise((resolve,reject) => {
      if(this.status === FUlFILLED){//成功执行
        //因为promise2是执行完之后才能实例化得到,promise2正在执行中获取不到,将其变成异步函数进行获取
        setTimeout(() =>{
          //将当前参数复制给回调函数,
          //由于传入值可能是普通值或者是promise对象
          //如果是普通值,直接调用promise
          //如果是promise对象 调用then查看promise对象返回的状态,判断是调用reslove还是reject
          try {//捕获上一个promise执行then回调方法可能会出现的异常
            let x = successCallback(this.value);
            reslovePromise(promise2,x,reslove,reject);
          } catch (error) {
            
          }
        },0)
      }else if(this.status === REJECTED){//失败
        setTimeout(() =>{
          try {
              //将当前原因给失败回调函数
              let x = failCallback(this.reason);
              reslovePromise(promise2,x,reslove, reject);
          } catch (error) {
            
          }
        },0)
      }else{//存在异步回调,等待异步函数执行完
        //将成功回调和失败回调存储起来
        this.successCallback.push(() =>{
          setTimeout(() =>{
            try {
              let x = successCallback(this.reason);
              reslovePromise(promise2,x,reslove, reject);
            } catch (error) {
              
            }
          },0)
        }); 
        this.failCallback.push(() => {
          setTimeout(() =>{
            try {
              let x = failCallback(this.reason);
              reslovePromise(promise2,x,reslove, reject);
            } catch (error) {
              
            }
          },0)
        }); 
      }
    })
    return promise2;
  }
  //不管成功还是失败最后都会执行一次,后面调用then方法拿到最后的值
  finally (callback) {
    return this.then(value => {
      //调用MyPromise的resolve的方法,不管是同步还是异步的回调方法,都当做promise函数返回
      return MyPromise.resolve(callback()).then((value)=>value)
    },reason =>{
      return MyPromise.resolve(callback()).then(()=>{throw reason})
    })
  }
  //then第二个参数不调用reject回调函数,直接在最后一次调用catch捕获异常
  catch(failCallback){
    return this.then(undefined,failCallback)
  }
  //静态方法,无须实例化调用,可直接Promise.all()
  //all传入数组,只有都执行完才往下执行then方法
  static all (array) {
    let result = [];//存储已经执行
    let index = 0;//记录值
    //最后返回的promise对象
    return new MyPromise((resolve,reject) =>{
      function addData (key, value) {
        index++;
        result[key] = value;
        //防止数组中存在异步函数,存在,等待异步函数执行完
        if(array.length === index){//如果执行的数组都执行了,则长度等于记录值,往下执行
          reslove(result);
        }
      }
      //循环调用
      for(let i = 0; i <array.length; i++){
        let current = array[i];
        if(current instanceof Mypromise){
          current.then(value => addData(i,value),(reason) => reject(reason))
        }else{
          //普通值
          addData(i,array[i])
        }
      }
      if(array.length === index){
        reslove(result);
      }
    })
  }
  //直接调用Promise.resolve()更改状态
  static  reslove (value){
    //传入值是promise对象
    if(value instanceof Mypromise){
      return new Mypromise(resolve => resolve(value))
    }else{//普通值直接返回
      return value;
    }
  }
}
function reslovePromise(promise2,x,reslove,reject){
  if(promise2 === x){//返回自身
    //意思是链式调用自己
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  //判断x是否是MyPromise的实例
  if(promise2 instanceof x){//通过原型判断是自己
    //说明是promise对象,调用then方法查看promise状态
    x.then(reslove,reject);
  }else{
    //普通值
    reslove(x);
  }
}
module.exports = MyPromise;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容