从零开始 - 40 行代码实现一个简单 Promise 函数
一个遵循PromiseA+规范的函数,个人认为解决了 callback 异步回调地狱的问题,注意是 callback 方式的回调地狱,promise 本身也可以存在回调地狱,需配合 ES7 特性 async、await 才能做到完全解决回调地狱。
Promise 主要特点
Promise 会有三种状态,「进⾏中」「已完成」和「已拒绝」,进⾏中状态可以更改为已完成或已拒绝,已经更改过状态后⽆法继续更改(例如从已完成改为已拒绝)。
Promise 构造之后需要传⼊⼀个函数,它接受两个参数,执⾏第⼀个参数之后就会改变当前 promise 为「已完成」状态,执⾏ 第⼆个参数之后就会变为「已拒绝」状态。
通过
.then
⽅法,即可在上⼀个 promise 达到已完成 时继续执⾏下⼀个函数或 promise。同时通过 resolve 或 reject 时传⼊参数,即可给下⼀个函数或 promise 传⼊初始值。已拒绝的 promise,后续可以通过 .catch ⽅法或是 .then ⽅法的第⼆个参数或是 try catch 进⾏捕获。
根据特性梳理结构
实现 resolve
这是 Promise 的第一个关键点,主要在于逻辑的判断,如何将 then 串联起来,以及最后收集依赖
第二个关键点在于,用户传入的函数,在构造时会立即执行,但收集依赖是在 then 方法中,所以需要将传入的函数放到异步队列中去执行
接下来将 reject 也实现进去,handleFn 为用户传入的函数,其接收两个参数 resolve 和 reject,我们分别执行了两个队列里收集的任务。
而 then 中则创建了一个工厂函数,用于生成两种收集依赖的方法。
完整代码
至此大概 40 行的代码实现了一个简单的 Promise,写个例子测试下
注:本例中实现的简单 Promise 无法跑通全部官方测试用例,只是对实现规范中的核心部分进行一次编写练习。
主要理解以上两个关键点其实就理解了 Promise 的核心部分,面试中可应对大部分 Promise 原理考察,如果面试官要你用手写完整的 Promise 实现,那你应该反问他贵公司是不是从来不使用电脑办公。
最后用上我们手写的 SimplePromise 来运行一道综合题加深对 Promise 的认识
输出结果:
版权声明: 本文为 InfoQ 作者【茶无味的一天】的原创文章。
原文链接:【http://xie.infoq.cn/article/f5750cdcd9e76bb1c3573595c】。文章转载请联系作者。
评论