ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-04-28 22:05:15  阅读:145  来源: 互联网

标签:promiss resolve err callback resolveCallback reject rejectCallback


// 要模拟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)
  })

 

标签:promiss,resolve,err,callback,resolveCallback,reject,rejectCallback
来源: https://www.cnblogs.com/djjlovedjj/p/14715896.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有