技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 从Promise的Then说起

从Promise的Then说起

浏览:760次  出处信息

Promise让代码变得更人性化

曾经我一直在思考,为什么代码会比较难读。后来发现,我们平时要阅读的所有媒体:报纸、书、新闻,我们在阅读的时候,都是从上到下一直读下去的,然而,我们的在读代码的时候,经常要跳着去读,这种阅读方式其实是反人类的,如果我们能在读代码的时候,也可以从上往下一直读下去,那么,代码就会变得可读性提高很多。

对比JS中,callback是让我们跳来跳去读代码最大的罪魁祸首,它让我们的流程变得混乱,Promise正是为了解决这一问题而产生的。我们来对比一下这个过程

使用Promise之后

很明显看出,代码就变成线性的了,逻辑也变得更加清晰可读

Promise流程再优化

promse出来之后,大家都有很多的想法,在Promise之上再封装一层,使用异步流程更清晰可读。下面是Abstract-fence 2.0(开发中)的一种解决方案(规范)

Abstract-fence中,function会被分解为多个task

其中, init是task render执行后再执行render, 而render任务又是由getData任务执行后再渲染组成,其中每个task的定义function的参数使用依赖注入传递,全局属性使用{}包裹

但是在使用Promise.all的过程中,遇到了一个Promise奇怪的问题

Array.prototype.then与Promise.all

很简单的一段代码

毫无疑问,这段代码在浏览器运行会先打印1,然后再输出2 但如果在前面增加对then方法的定义,如下代码

那么这段代码只会打印出1, 2却永远不会运行

查了很多资料,确认promise.all的参数只能接收数组(类数组)

比如如下代码就会报错

所以,Promise.all接收一个Iterator可遍历对象

对数组的prototype.then定义为什么会影响到Promise的行为呢?

Promise A+规范

Promise A+规范看起来还是有点绕,这里省略掉一些具体的实现细节,将Promise A+更直白的阐述如下

1. Promise then方法需要return一个新的Promise出来,如下

2. 如果promise本身状态变更到fulfilled之后,调用rsFunc,rsFunc的解析值x, 与新的promise2进行promise的解析过程[[Resolve]](promise2, x), x的取值不同,有不同的情况

3. 若x为一个promise,则x完成的最后,再fufill promise2, 对应如下代码

4. 若x为一个对象或者函数,如果有then方法,将会执行then方法,then方法this指向x本身,如下

5. 如果x没有then方法,那么,x将会做为值来 满足 promise2

Promise A+给出了一些具体的执行细节,保证了then的顺序执行,但在规范中,并未提到Promise.all方法的执行方式

为此,查看bluebird的Promise.all实现方法

BlueBird关于Promise.all实现方法解析

首先,promise中引用promise_array代码如下(已略去一些无关代码)

promise.all的实现也很简单

可见,具体的细节在promise_array中的实现

PromiseArray的构造方法中,将参数赋值给this._values,待_init方法中使用

init总结为几步

1.尝试转换参数为Promise对象

2.如果转换成功,那么检查Promise对象的状态

  1. Pending,等待Promise

  2. fulfilled, 换取返回值,继续进行

  3. Rejected 终止,返回原因

  4. 其他, 终止

上面的代码可以看出,一旦数组的具有then方法,就可被tryConvertToPromise方法转换为一个Promise对象,如果then方法未实现promise规范,那么Promise对象就会处于Pending的状态,Promise.all方法永远就不会达到fulfilled的条件,问题也就明白了


QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1