手写一款符合Promise/A+规范的Promise

╰+哭是因爲堅強的太久メ 2022-03-07 02:48 165阅读 0赞

## 手写一款符合Promise/A+规范的Promise ##

**长篇预警！有点长，可以选择性观看。如果对Promise源码不是很清楚，还是推荐从头看，相信你认真从头看到尾，并且去实际操作了，肯定会有收获的。主要是代码部分有点多，不过好多都是重复的，不必担心**

Promise的一些用法在此不多赘述，本篇主要带领你手写一个Promise源码，学完你就会发现：Promise没有你想象中的那么难

## 本篇大概分为以下步骤 ##

*  实现简单的同步Promise
 *  增加异步功能
 *  增加链式调用then
 *  增加catch finally方法
 *  增加all race 等方法
 *  实现一个promise的延迟对象defer
 *  最终测试

--------------------

> 实现简单的同步Promise

先大概说一下基本概念：  
Promise内部维护着三种状态，即pending,resolved和rejected。初始状态是pending，状态可以有pending--->relolved,或者pending--->rejected.不能从resolve转换为rejected 或者从rejected转换成resolved.  
即 只要Promise由pending状态转换为其他状态后，状态就不可变更。  
ok.知道了这些后，我们开始手撸代码：

注意观看序号 1 2 3 4 5 ...

通过require()引入手撸的Promise

ok.经调用发现 此代码可以实现部分Promise的功能，但仅仅是同步下才有效果。  
那异步呢？ 别急这就来~：

> 增加异步功能

注意观看序号 1 2 3 4 5 ...

代码测试：

可以看到 1.5s后 执行了resolve() 并打印了success.1，至此，我们实现了异步的Promise.其实这里的实现异步的思想就是发布订阅.

en～ok.高能预警?.接下来就稍稍复杂了 因为我们要实现链式调用then。 要实现这个功能那我们就要重写then方法，并在then方法中重新返回一个Promise,只有这样，才可以实现多次调用then.而且要新增一个解析返回值是否为promise的函数.

稍微捋下逻辑：

*  如果一个then方法返回一个普通值的话，这个值会传递给下一个then中作为resolve成功的结果
 *  如果一个then方法返回一个promise的话，会根据返回的promise是成功还是失败，决定下一个then是成功还是失败

? 上代码：

> 增加链式调用then

注意观看序号 1 2 3 4 5 ...

ok. 至此 我们已经实现了Promsie的异步和链式调用. Promise中比较复杂的部分我们已经搞定了 接下来就是添加一些方法，其实这部分反而没那么复杂了.

catch : catch方法本质上就是一个then方法的变形，只有失败时的回调 没有成功时的回调  
finally : finally方法的作用是不管 Promise 对象最后状态如何，都会执行操作.其实说白了就是在then方法的成功和失败的回调函数中都执行该方法就行了.

ok.老规矩 上代码～

> 增加catch finally方法

> 增加all race resolve reject等方法

> 实现一个promise的延迟对象defer

此步是为了测试我们手写的Promsie符不符合Promsie/A+规范，如果没有defer的话，我们在测试过程中就会报一个TypeError: adapter.deferred is not a function.

其实写完defer后，我们就可以去进行测试我们手写的Promsie符不符合Promsie/A+规范了。

即：本篇手写一款符合Promise/A+规范的Promise的最终本为：

> 最终测试

*  测试当前代码是否符合Promise/A+规范
 *  全局安装 npm i -g promises-aplus-tests
 *  文件所在目录运行以下命令 (例如你的文件名为:MyPrommise.js)
 *  promise-aplus-tests MyPrommise.js
 *  等待
 *  ok.

![clipboard.png][]

源码在github上，写文章不易，欢迎star或fork，thx～  
[github][]

[clipboard.png]: /images/20220307/8e75bc97be1d4d8d99dc80ce64dec09f.png
[github]: https://github.com/funky-tiger/promise