简单的实现一个promise

有问题或者不足之处麻烦点出,请多包含。
第一步:分析promise
1. 用法
2. 分析结构
promise是一个构造函数,有then和catch两个基本的方法,其他还有比如all、race、resolve、reject、finally等。(这里的resolve和reject是指内部方法,而不是executor里的俩回调)
3. 分析参数
①:new 过程中传入一个回调函数--executor给promise,回调函数里有两个参数(resolve,reject,均是函数)由promise来定义并传给executor。resolve和reject调用时可传入参数作为实例的value,在then的回调中会被作为参数传入。
②:then可传入两个参数作为回调,第一个参数为resolve时执行的回调,第二个为reject时执行的回调,回调的参数res和err是实例里的value。catch同理。
4. 分析promise的功能
1. promise的作用是将原本异步方法中的回调地狱套娃情况变为链式调用,为了保证异步的正确性,then里的回调会被放入到微任务队列中,这里可以简单的用setTimeout实现。
2. 前面说过resolve()会走then里的success回调,reject()会走then里的fail回调。
这里有个问题:如何确保能正确调用对应的函数呢?
答:条件判断,创建一个state用于存储当前状态,then里通过判断state是什么状态再调用对应的回调,这样就能确保正确性。
3. state默认为pending状态,表示在触发事件,拿到数据value之前,这里的事件指resolve以及reject。前面说过resolve和reject均是可以传入参数的,而这个参数就是实例保存的value,因此还需要一个value存储回调的结果方便传给后面的then回调。(异步情况需要另外创建几个变量,后面再说)。另外两个状态为fulfilled和rejected分别对应resolve和reject执行后的状态。
5. 那么一个非常简单的promise就应该是下面这样的
1. constructor
constructor中对数据进行初始化,以及定义resolve和reject
2. then和catch
setTimeout用于模拟放入异步队列
3. 整合
一个只能处理同步任务的简单promise
6. 拓展升级
1. 每一个then或者catch都会返回一个promise对象,因此需要封装then方法
需要对每一个回调的返回值进行判断,如果是promise类则进行then调用resolve(success的返回值),reject同理。如果不是promise类型则直接resolve和reject函数返回值。
2. 支持异步
如果executor里的任务是一个异步任务,那么esolve或者reject会被放入任务队列中,可能会在then里的回调执行之后再执行,此时的state仍处于pending,会影响到函数的正确调用以及数据的正确性。
这里会有一个问题,按照前面的思路,应该是创建一个实例的变量用来存储回调。但是在支持了返回promise类型后可能会存在多个then和catch,所以一个变量明显不够,因此需要创建一个队列用于存放回调(这里我创建两个队列,一个成功队列,另一个失败队列)。
前面说到then中的state可能为pending,那么就应该加一个判断,如果是pending就将回调放入到异步队列中。
这里又有一个问题,队列是有了,那么该在哪执行这些回调?
答:在resolve和reject中,前面说过,只有状态改变了回调才会执行,所以resolve/reject中改变状态后就可以执行队列了。
以下为重写后的constructor
以下为重写的then
3. 支持all和race
①:all的实现,all需要传入一个Promise[],当所有promise元素都执行完后返回一组数据,当有一个失败时则返回失败原因。
②:race实现:race和all差不多,不同点在于all需要等待所有的promise都执行then,而race只需要最快的那个就行。
4. 支持resolve和reject
直接返回一个promise对象
7. 最终版
不足之处麻烦指出,谢谢。