Promise框架RSVP.js 分析

这个框架代码看的很快,基本过了一遍就差不多看明白了。只要日常编码过程中使用过Promise。Promise本身确实是比较简单明了的。只是一个异步函数的特殊调用链。

一,前端CallBack Hell

前端代码中的一些异步操作,比如调用服务器的API,因为网络,服务器等等各种原因,时常会出现乱序返回的情况。所以为了保证调用的先后顺序问题,基本上会设置一些call back 方法,用于异步访问之后的本地代码处理。

但当多个异步调用存在嵌套操作的时候,就会出现callback hell,也就是callback 方法无限制嵌套的情况,而且为了保证多个异步调用的次序不出错,这些callback 还很难封装成function来简化代码,加强代码的可读性。

基本上早期的nodejs,开发人员对于callback hell简直头痛无比。

因为这样的代码不是很好封装成一个个单个的function。

其后Promise技术规范的出现,成功解决掉了这个问题。

Promise的规范中,比较重要的两条。

1.每个Promise只执行一次,并返回一个固定的结果。

也就是说,当一个访问服务器的API,比如getuser,当被封装成promise之后,只会使用固定的参数,访问服务器一次,并返回一个值。如果试图第二次运行这个promise,不会有任何异步访问的可能性。如果getuser是整个异步调用链的一环,

通过promise.then().then()这样的链接之后,也能确保整个调用链只执行一次。

2.Promise可以返回一个新的Promise。

这就可以形成一个异步的逻辑调用链。让一系列的异步调用,从语义上看上去就像顺序执行一样。这和RxJS框架的一部分功能极为类似。

比如a().then(res=>b(res).then(res=>c(res).then(res=>d(res).catch(err=>error(err))

a(),b().c(),d()这些本身是异步操作,返回时间是不可控的,但通过promise的封装,就可以让代码从语义上符合顺序执行。代码的可读性增强了很多。

二,内部状态

代码不算复杂,核心部分代码,只是设置了三个状态,PENDING,FULFILLED,REJECTED。

PENDING表示Promise的初始化状态。

FULFILLED表示Promise顺利执行并返回正确的结果。

REJECTED标示Promise执行失败,并返回错误。

从PENDING状态转移到FULFILLED和REJECTED是不可逆的。确保Promise对象只运行一次。

三,reslove,reject和then

前一个promise和下一个待执行的promise之间存在一个对应关系。用于传递需要的参数。

四,promise调用链的内部逻辑

当reslove返回是一个promise的时候,就触发了一个连续的调用链。

五,其他

RSVP.js提供了一些常规操作,all,race,allsettle,还提供了一些扩展操作,map,hash,封装nodejs模式,过滤器模式。用于一些特殊需求的场合。具体例子就不说了,有兴趣的同学可以自行探询下。

说明:部分图例来自电子书http://exploringjs.com/es6/ch_promises.html

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180419G0IAI000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券