从简到难手把手教你写Promise源码手写 Promise源码

我不是女神ヾ 2022-12-21 03:29 173阅读 0赞

### 先写个简易版的 ###

导入执行

const Mypromise = require('./myPromise')
    
    
    
    const my = new Mypromise((res,rej)=>{ 
        res(1)
        rej(2)
    })
    console.log(my);
    my.then(v => console.log(v),v => console.log(v))

### 简易版加入异步逻辑 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]  
如果直接then会什么都不执行 进入else的分支  
上代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]

### 简易版加入异步逻辑实现多次调用添加处理函数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]

### 实现then的链式调用 part1 ###

结果

const my = new Mypromise((res,rej)=>{ 
        res(1)
        // setTimeout(()=>{ 
        // res(1)
        // },1500)
        // rej(2)
    })
    
    my.then(v => 100,v => console.log(v))
    .then(v => console.log(v),v => console.log(v)) 100

### 实现then的链式调用 part2 ###

判断返回值是普通值还是promise对象

结果

// const MyPromise = require('../myPromise')
    const Mypromise = require('./myPromise')
    // 
    
    
    const my = new Mypromise((res,rej)=>{ 
        res(1)
        // setTimeout(()=>{ 
        // res(1)
        // },1500)
        // rej(2)
    })
    
    function other (){ 
        return new Mypromise((res,rej)=>{ 
            res('other')
        })
    }
    
    my.then(v => other(),v => console.log(v))
    .then(v => console.log(v),v => console.log(v)) 
    2
    other

### then 方法链式调用识别 Promise 对象自返回 ###

防止调自己  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]

结果

let p1 = my.then(v => 
        { return p1},v => console.log(v))
    
        p1.then(v => console.log(v),v => console.log(v))
        
    // TypeError: Chaining cycle detected for promise #<Promise>

### 捕获错误及 then 链式调用其他状态代码补充 ###

// const MyPromise = require('../myPromise')
    const Mypromise = require('./myPromise')
    // 
    
    
    const my = new Mypromise((res,rej)=>{ 
    // throw new Error('fail')
        // res(2)
        setTimeout(()=>{ 
            res(1)
        },1500)
        // rej(2)
    })
    
    // function other (){ 
    // return new Mypromise((res,rej)=>{ 
    // res('other')
    // })
    // }
    let f = function fail(v){ 
        console.log('fail log1');
        console.log(v);
        // throw new Error('fail then')
        // return 33
    }
    let s = function success(v){ 
        console.log('success log1');
        console.log(v);
        return 2
        // throw new Error('success then')
    }
    
    my.then(s,f)
    .then(v => console.log(v),v => console.log(v))
    
    success log1
    1
    2

### 将 then 方法的参数变成可选参数 ###

结果

const my = new Mypromise((res,rej)=>{ 
    // throw new Error('fail')
        res('promise success')
        // setTimeout(()=>{ 
        // res(1)
        // },1500)
        // rej(2)
    })
    
    my.then().then().then(v=> console.log(v),v=> console.log(v))
    //promise success

### Promise.all 方法的实现 ###

All方法回顾：数组为参数，按顺序执行，有一个失败就都失败，直接返回数组结果，都成功返回所有数组结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 5]  
使用index 长度对比arr长度 如果相等，证明所有都执行完了  
上代码

static all (arr){ 
            let result = []
            let index = 0
          return  new MyPromise((res,rej)=>{ 
                function addResult(value,i){ 
                    result[i] = value
                    index++
                    if(index === arr.length){ 
                        res(result)
                    }
                }
                for(let i = 0; i < arr.length;i++){ 
                    let current = arr[i]
                    if(current instanceof MyPromise){ 
                        
                        current.then(value => addResult(value,i),reason =>rej(reason))
                    }else{ 
                        addResult(current,i)
                    }
                }
               
            })
          
        }

结果

let p1 = new MyPromise((res,rej)=>{ 
        setTimeout(()=>{ 
            res('p1')
        },1000)
    })
    
    let p2 = new MyPromise((res,rej)=>{ 
        // res('p2')
        rej('p2')
    })
    MyPromise.all(['12',p1,p2,'3']).then(v =>{ console.log(v)},v =>{ console.log(v)})
    //p2

### Promise.resolve 方法的实现 ###

较简单就不贴其他代码了，判断是否是promise 是就返回，是普通值就new一个promise反回

static resolve(v){ 
            if(v instanceof MyPromise) return v
            return new MyPromise((res,rej)=>{ res(v)})
               
        }
    
    let p1 = new MyPromise((res,rej)=>{ 
        setTimeout(()=>{ 
            res('p1')
        },1000)
    })
    
    let p2 = new MyPromise((res,rej)=>{ 
        // res('p2')
        rej('p2')
    })
    MyPromise.resolve(p1).then(res => console.log(res))
    MyPromise.resolve('p12').then(res => console.log(res))

### finally 方法的实现 ###

finally (callback){ 
            return this.then(value =>{ 
                return MyPromise.resolve(callback()).then(()=> value)
            }, reason =>{ 
                return MyPromise.resolve(callback()).then(()=> { throw reason})
            })
        }

### catch 方法的实现 ###

catch(failCallback){ 
           return this.then(undefined,failCallback)
        }
    
    let p2 = new MyPromise((res,rej)=>{ 
        // res('p2')
        rej('p2')
    })
    
    p2.then(v=>console.log(2)).catch(v=>console.log(v)) //p2

/* 1. Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去()=>{} 执行器会立即执行 2. Promise 中有三种状态 分别为 成功 fulfilled 失败 rejected 等待 pending pending -> fulfilled pending -> rejected 一旦状态确定就不可更改 3. resolve和reject函数是用来更改状态的 resolve: fulfilled reject: rejected 4. then方法内部做的事情就判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败回调函数 then方法是被定义在原型对象中的 5. then成功回调有一个参数 表示成功之后的值 then失败回调有一个参数 表示失败后的原因 6. 同一个promise对象下面的then方法是可以被调用多次的 7. then方法是可以被链式调用的, 后面then方法的回调函数拿到值的是上一个then方法的回调函数的返回值 */
    
    const MyPromise = require('./myPromise');
    
    function p1 () { 
      return new MyPromise(function (resolve, reject) { 
        setTimeout(function () { 
          resolve('p1')
        }, 2000)
      })
    }
    function p2 () { 
      return new MyPromise(function (resolve, reject) { 
        reject('失败')
        // resolve('成功'); 
      })
    }
    
    p2()
      .then(value => console.log(value))
      .catch(reason => console.log(reason))

### race方法实现 ###

static race(arr){ 
            let mypro = new JackPromise((res,rej)=>{ 
                for(let i = 0;i<arr.length;i++){ 
                    if(arr[i] instanceof JackPromise){ 
                        arr[i].then(res,rej)
                    }else{ 
                        res(arr[i])
                    }
                }
            })
            return mypro
        }
        JackPromise.race([p2,2]).then(v=>console.log(v))

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1bd2579f4958463596609ed4527a72b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/3062a1bf035c4d4d8fe48607c7606193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/ae0de55228144d239da2b67e8b8ff3ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/2cbf8ba7bac04e8ba01aca9c624d1045.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/fd3a81c28423469a8c9fe7489e1b8f02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/fe662374e0fc4a628ef7d2273daff907.png