手写 promise

1.首先申明Promise ， promise 是一个类，接收一个函数作为参数，函数中会接收两个参数，一个是成功的回调 resolve,一个是失败的回调 reject, 在new 该类的的时候，传入的函数会立即执行

 1 class Promise {
 2   constructor(task){
 3     let resolve = () => {
 4 
 5     }
 6     let reject = () => {
 7 
 8     }
 9     task(resolve,reject)
10   }
11 }

2.解决基本状态，promise有三个状态  pending, fulfilled, rejected

pending为初始态，可以转为 fulfilled 成功态   也可以转为 rejected 失败态

fulfilled 成功态  不可以转为其他状态  并且有一个返回值 value

rejected 失败态  不可以转为其他状态 并且有一个错误返回值  reason

如果任务函数报错 直接执行 reject

 1 class Promise2 {
 2   constructor(task){
 3     this.status = ‘pending‘
 4     this.value = undefined
 5     this.reason = undefined
 6     let resolve = value => {
 7       if(this.status === ‘pending‘){
 8         this.status = ‘fulfilled‘
 9         this.value = value
10       }
11     }
12     let reject = reason => {
13       if(this.status === ‘pending‘){
14         this.status = ‘rejected‘
15         this.reason = reason
16       }
17     }
18     try{
19       task(resolve,reject)
20     }catch(err){
21       reject(err)
22     }
23   }
24 }

3.then方法

在promise 中有个then 的方法，里面有两个参数 onFulfilled,onRejected,成功有成功的值  失败有失败的原因

当状态值是 fulfilled 的时候 执行 onFulfilled 函数并传入 this.value .当状态值是rejected 的时候 执行onRejected 函数并且传入this.reason

如果 onFulfilled onRejected 是函数，必须在 fulfilled 和 rejected 后调用  并且第一个参数 分别是 this.value 和 this.reason

 1 class Promise2 {
 2   constructor(task){
 3     this.status = ‘pending‘
 4     this.value = undefined
 5     this.reason = undefined
 6     let resolve = value => {
 7       if(this.status === ‘pending‘){
 8         this.status = ‘fulfilled‘
 9         this.value = value
10       }
11     }
12     let reject = reason => {
13       if(this.status === ‘pending‘){
14         this.status = ‘rejected‘
15         this.reason = reason
16       }
17     }
18     try{
19       task(resolve,reject)
20     }catch(err){
21       reject(err)
22     }
23   }
24   then(onFulfilled,onRejected){
25     if(this.status === ‘fulfilled‘){
26       onFulfilled(this.value)
27     }
28     if(this.status === ‘rejected‘){
29       onRejected(this.reason)
30     }
31   }
32 }

4.解决异步的问题

上面基本可以解决一些同步的代码，但是当resolve 在setTimeout 中执行的时候，then 的时候的status 还是pending 状态，那么我们需要在then 的时候将成功和失败的函数存起来，在resolve 或者reject 的时候去调用

类似于发布订阅模式 先将函数存在起来  而且可能会有多个then 函数 所有将成功和失败的函数分别存在 两个数组中