专业的编程技术博客社区

网站首页 > 博客文章 正文

前端ES6中Promise原理之进阶篇(二)

baijin 2024-10-27 19:21:21 博客文章 9 ℃ 0 评论

之前关于Promise的原理已经分享了两篇文章:

  1. 前端ES6中Promise的运行原理
  2. 前端ES6中Promise的运行原理之进阶篇(一)

反响还不错,这一篇主要聊一下当Promise中返回一个对象时,它是怎么处理的?

两种特殊情况

Promise会对返回结果校验两种情况:

  1. 是否是对象或者函数,并且拥有then方法属性
  2. 是否又是一个Promise对象

注意:对于第一种情况中的函数,then是作为其静态方法的。因为函数也可以被当做对象,所以这种情况和返回一个普通的对象没有区别。

Promise对返回普通对象的处理

我们写一个例子(demo1)

在p1中返回了一个对象,这个对象具有一个then方法。这个是怎么执行的呢?还记得上篇文章中数据流的两个方法asap和flush吗?(不记得的话只能自己点开我上一篇文章看看吧,这里就不码字了!)

先通过asap向queue中push一个方法,在触发flush运行!这里就是直接运行普通对象的then方法,不过在运行的时候会传入两个方法参数fn1和fn2,待then方法运行得到结果,需要把这个结果传入fn1或者fn2中,在fn1和fn2中修改当前promise对象的状态和结果,然后继续执行下一个promise,本质就是多运行了thenObj.then(泛指)这样的逻辑!

Promise对返回另外一个Promise对象的处理

先看例子(demo3)

我们在p2中返回了一个新的promise对象p5,那这种怎么处理呢?

当运行完p2中then方法后,按正常逻辑接下来应该修改p2的状态和结果,但是此时发现then返回的结果是一个promise对象p5,这里又分两种情况:

  1. 如果p5这个promise已经运行完毕有结果了(把p5去掉then就是这种情况),那么就把p5的结果和状态同步到p2上,然后继续向下遍历其他的promise。
  2. 如果p5这个promise还没有运行完毕,怎么办呢?

针对上面第二种情况我们继续分析!

这里的解决方案是把p5当做parent,p2当做child!

当P1运行完毕,P2拿到了P1的运行结果和状态,P2就开始运行,但是P2运行完毕之后发现返回的是一个新的无状态的Promise,此时P2并没有急于改变自己的状态,而是把自己当做了child,把p5当做了parent,那么此时的数据流就变成了p5->p2->p3->p4(认贼作父啊),后面的运行逻辑就和之前说的一样了。

总结

以上两种情况无论写在p1中还是下面的then方法中,运行方式都是一样的。这篇文章就写到这,接下来的文章我们聊一聊Promise的几个方法!

喜欢我的文章就关注我吧,有问题可以发表评论,我们一起学习,共同成长!(收藏和转发之前,关注一下吧,你们的关注是我的动力!)

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表