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

最新推荐文章于 2024-09-21 10:42:59 发布

青云码上

最新推荐文章于 2024-09-21 10:42:59 发布

阅读量284

点赞数

本文链接：https://blog.csdn.net/qq_21363577/article/details/116254164

版权

本文详细介绍了如何自定义Promise构造函数，包括resolve和reject方法的实现，以及.then和.catch方法的使用。通过实例演示了如何在MyPromise构造函数中处理异步操作，并展示了链式调用的用法。

摘要由CSDN通过智能技术生成

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