前端面试自测知识点--手写Promise

怼烎@ 2022-09-14 14:23 201阅读 0赞

手写Promise  
手写Promise.resolve , Promise.reject, Promise.all, Promise.race

/** * @description 手写Promise */
    
    class MyPromise { 
      state = 'pending' // 状态 'pending' 'fulfilled' 'rejected'
      value = undefined  // 成功后的值
      reason = undefined // 失败后的值
    
      resolveCallbacks = [] // pending状态下，成功的回调
      rejectCallbacks = [] // pending状态下，失败的回调
    
    
      constructor(fn){ 
        const resolveHandler = (value) => { 
          if(this.state === 'pending'){ 
            this.state = 'fulfilled'
            this.value = value
            this.resolveCallbacks.forEach(fn => fn(this.value))
          }
        }
    
        const rejectHandler = (reason) => { 
          if(this.state === 'pending'){ 
            this.state = 'rejected'
            this.reason = reason
            this.rejectCallbacks.forEach(fn => fn(this.reason))
          }
        }
    
        try { 
          fn(resolveHandler, rejectHandler)
        } catch(err) { 
          rejectHandler(err)
        }
      }
    
      then(fn1, fn2){ 
        // 当 pending状态下， fn1 和 fn2 会被存储到callbacks中
        fn1 = typeof fn1 === "function" ? fn1 : (v) => v
        fn2 = typeof fn2 === "function" ? fn2 : (e) => e
    
        if(this.state === 'pending'){ 
          const p1 = new MyPromise((resolve,reject) => { 
            this.resolveCallbacks.push(()=>{ 
              try { 
                const newValue = fn1(this.value)
                resolve(newValue)
              } catch(err){ 
                reject(err)
              }
            })
    
            this.rejectCallbacks.push(() => { 
              try { 
                const newReason = fn2(this.Reason)
                reject(newReason)
              } catch(err){ 
                reject(err)
              }
            })
          })
          return p1
        }
    
        if(this.state === 'fulfilled'){ 
          const p1 = new MyPromise((resolve,reject) => { 
            try { 
              const newValue = fn1(this.value)
              resolve(newValue)
            } catch(err){ 
              reject(err)
            }
          })
          return p1
        }
    
        if(this.state === 'rejected'){ 
          const p1 = new MyPromise((resolve,reject) => { 
            try { 
              const newReason = fn2(this.reason)
              reject(newReason)
            } catch(err){ 
              reject(err)
            }
          })
          return p1
        }
    
      }
     
      // 就是then的语法糖，简单模式
      catch(fn) { 
        return this.then(null, fn)
      }
    }
    
    MyPromise.resolve = function(value) { 
      return new MyPromise((resolve,reject) => { 
        resolve(value)
      })
    }
    
    MyPromise.reject = function(reason) { 
      return new MyPromise((resolve,reject) => { 
        reject(reason) 
      })
    }
    
    MyPromise.all = function (promiseList = []) { 
      const p1 = new MyPromise((resolve,reject) => { 
        const result = []
        const length = promiseList.length
        let resolvedCount = 0
    
        promiseList.forEach((p)=>{ 
          p.then(data => { 
            result.push(data)
            resolvedCount++ // 同理，resolvedCount 必须在then里进行++
            // 这里不能用forEach 的 index来判断 index === length - 1，因为forEach不是一个异步循环，index会一下子增加到最大，而promiseList中的每一个promise还不一定执行完
            if(resolvedCount === length){ 
              // 已经遍历到最后一个promise
              resolve(result)
            }
          }).catch(err => { 
            reject(err)
          })
        })
      })
      return p1
    }
    
    MyPromise.race = function(promiseList = []) { 
      let resolved = false // 标记
      const p1 = new MyPromise((resolve,reject) => { 
        promiseList.forEach(p => { 
          p.then(data => { 
            if(!resolved){ 
              resolve(data)
              resolved = true
            }
          }).catch((err) => { 
            reject(err)
          })
        })
      })
      return p1
    }