资讯专栏INFORMATION COLUMN

手写极简版Promise

geekidentity / 3053人阅读

摘要:极简版满足的使用方式生成实例对象的方式通过类直接调用静态方法,目前静态方法仅支持亲测使用,欢迎指教,互相学习,链接,欢迎。附赠利用构造函数手写的方法,链接。

极简版Promise 满足的使用方式

生成实例对象的方式:new MyPromise()

通过类直接调用静态方法:MyPromise.resolve(),目前静态方法仅支持resolve & reject

亲测使用OK,欢迎指教,互相学习,github链接,欢迎star。
附赠利用构造函数手写Promise 的方法,github链接。

class MyPromise {
  constructor(fn) {
    // 定义Promise 三种状态
      this.states = {
          PENDING: "PENDING", RESOLVED: "RESOLVED", REJECTED: "REJECTED"
      }
      // 定义传递到then的value
      this.value = null
      // 定义当前Promise运行状态
      this.state = this.states.PENDING
      // 定义Promise失败状态的回调函数集合
      this.resolvedCallBacks = []
      // 定义Promise成功状态的回调函数集合
      this.rejectedCallBacks = []
      // 为静态方法定义其内部使用的指向实例的that  
      MyPromise.that = this
      try {
      // 执行 new MyPromise() 内传入的方法
          fn(MyPromise.resolve, MyPromise.reject)
      } catch (error) {
          MyPromise.reject(this.value)
      }
  }
    // 静态resolve方法,MyPromise实例不可访问;
    //支持类MyPromise访问,例:MyPromise.resolve("success").then(e=>e)
  static resolve(value) {
      // 由于静态方法内部的this指向 类 而不是 实例,所以用下面的方法访问实例对象
      const that = MyPromise.that
      // 判断是否是MyPromise实例访问resolve
      const f = that instanceof MyPromise
      // MyPromise实例对象访问resolve
      if (f && that.state == that.states.PENDING) {
          that.state = that.states.RESOLVED
          that.value = value
          that.resolvedCallBacks.map(cb => (that.value = cb(that.value)))
      }
      // MyPromise类访问resolve
      if (!f) {
          const obj = new MyPromise()
          return Object.assign(obj, {
              state: obj.states.RESOLVED,
              value
          })
      }
  }
   // 静态reject方法,MyPromise实例不可访问;
   //支持类MyPromise访问,例:MyPromise.reject("fail").then(e=>e)
  static reject(value) {
      const that = MyPromise.that
      const f = that instanceof MyPromise
      if (f && that.state == that.states.PENDING) {
          that.state = that.states.REJECTED
          that.value = value
          that.rejectedCallBacks.map(cb => (that.value = cb(that.value)))
      }
      if (!f) {
          const obj = new MyPromise()
          return Object.assign(obj, {
              state: obj.states.REJECTED,
              value
          })
      }
  }
  // 定义在MyPromise原型上的then方法
  then(onFulfilled, onRejected) {
      const { PENDING, RESOLVED, REJECTED } = this.states
      const f = typeof onFulfilled == "function" ? onFulfilled : c => c;
      const r =
          typeof onRejected == "function"
              ? onRejected
              : c => {
                  throw c;
              };

      switch (this.state) {
          case PENDING:
              // ‘PENDING’状态下向回调函数集合添加callback
              this.resolvedCallBacks.push(f)
              this.rejectedCallBacks.push(r)
              break;
          case RESOLVED:
              // 将回调函数的返回值赋值给 实例的 value,满足链式调用then方法时传递value
              this.value = f(this.value)
              break;
          case REJECTED:
              // 同上
              this.value = r(this.value)
              break;
          default:
              break;
      }
      // 满足链式调用then,返回MyPromise实例对象
      return this
  }
}

MyPromise.resolve("success").then((e) => {
  console.log(e);
  return e + 1
}).then( res=> {
  console.log(res);
})
new MyPromise(resolve => {
  setTimeout(() => {
      resolve(1);
  }, 2000);
})
  .then(res1 => {
      console.log(res1);
      return 2;
  })
  .then(res2 => console.log(res2 ));

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102820.html

相关文章

  • 简版】SpringBoot+SpringData JPA 管理系统

    摘要:带你搭一个的我的目的是做一个十分简易的管理系统,这就得有页面,下面我继续来讲讲我是怎么快速搭一个管理系统的。由于是简易版,我的目的是能够快速搭建,而不在于代码的规范性。我们现在希望把记录塞到一个管理页面上展示起来。 前言 只有光头才能变强。 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在上一篇中已经讲解了如...

    CntChen 评论0 收藏0
  • C语言小项目——计时器(倒计时+报警提示)

    摘要:大家对计时器应该不陌生,我们在制定一个计划时,经常喜欢设置一个倒计时来规定完成时限,等到计时结束,它还会报警提示,今天,我就用语言编写一个简易的倒计时计时器。 ...

    Lin_YT 评论0 收藏0
  • Python 送你一棵圣诞树

    摘要:但今年不能老送同样的东西啊,那就给大家送上几棵圣诞树吧。极简版这个可算是最简单的圣诞树了。例如上面这棵圣诞树,每一个树枝又是一个小的圣诞树。这与编程中的递归思想很像顶部五角星略过炫彩版一般圣诞树上都会挂上的小彩灯。 今天是圣诞节,先祝大家圣诞快乐! 有人要说了,圣诞节是耶稣诞生的日子,我又不信基督教,有啥好庆祝的。这你就有所不知了,Python 的诞生也跟圣诞节有关:1989 年,那是...

    miya 评论0 收藏0
  • 十几行代码教你实现一个最简版promise

    摘要:最近研究了一下的实现,这篇文章使用了十几行代码实现了一个简单的以便帮助读者对有更深的了解。另外一个有三种状态。所以我们有以下的代码然后我们实现函数每次函数的执行会返回一个新的。因为这行代码是异步执行的,而当中的时,这行代码不应该执行。 最近研究了一下promise的实现,这篇文章使用了十几行代码实现了一个简单的promise;以便帮助读者对promise有更深的了解。本篇文章实现的pr...

    SQC 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<