简单版手写promiss,包含resolve,reject,then链式调用

// 要模拟promise的构造函数
  function MyPromise(fn) {
    let that = this;
    this.data = null; // 要resolve的数据
    this.err = null; // 要reject的数据
    this.resolveCallback = null; // 存放resolve的回调,即  .then  里面的函数
    this.rejectCallback = null; // 存放reject的回调,即  .catch  里面的函数
    // 自定义resolve函数
    this.resolve = function (data) {
      that.data = data; // 将resolve的数据存起来
      that.then(that.resolveCallback); // resolve函数被执行了就要(再次)执行then方法
    };
    // 自定义reject函数,同上的resolve
    this.reject = function (err) {
      that.err = err;
      that.catch(that.rejectCallback)

    };
    /* 
      将自定义的resolve、reject函数 当参数 传到 后面的实例化构造函数中,
    */
    fn(this.resolve, this.reject)
  }

  /* 
    将方法定义到构造方法的prototype上,这样的好处是:
    通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存。
    当然也可不通过原型,将方法fun以函数的形式定义在构造函数之外,直接在构造函数内 this.fun = fun 也是一样的
  */
  MyPromise.prototype.then = function (callback) {
    // callback 已经赋值给了 this.resolveCallback ,说明是第二次执行此方法,是在resolve函数里执行的此方法
    this.resolveCallback && this.resolveCallback(this.data);
    // this.resolveCallback 是null,说明是第一次执行此方法,将callback 赋值给 this.resolveCallback
    this.resolveCallback || (this.resolveCallback = callback);
    // 因为存在 .then().catch() 链式调用,所以要return自己
    return this;
  }

  // 同上面的 MyPromise.prototype.then
  MyPromise.prototype.catch = function (callback) {
    this.rejectCallback && this.rejectCallback(this.err);
    this.rejectCallback || (this.rejectCallback = callback);
    return this;
  }

  // 验证一下
  let obj = new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve("成功的数据")
    }, 1000)
    setTimeout(() => {
      reject("错误信息")
    }, 2000)
  })
  obj.then(res => {
    console.log("success:",res)
  }).catch(err => {
    console.log("fail:",err)
  })

 

上一篇:vue中axios的封装


下一篇:Promise的构造函数方法