手写一个promise的过程

Posted 2021-09-04 小顺石

实现promise中then方法的链式调用

const PEDDING = \'PEDDING\'
const RESOLVE = \'RESOLVE\'
const REJECT = \'REJECT\'
// promise 有三种状态
const handlePromise = (result,newPromise,resolve, reject)=>{
    if(result === newPromise){
        throw new Error(\'不能返回自己\')
    }
    // 返回的是对象或者方法（也可以是promise）
    if(typeof result === \'object\' && typeof result !== null || typeof result === \'function\'){
        // 判断result是否有then方法
        const then = result.then
        if(typeof then === \'function\'){
            // 如果then方法是一个function 默认是promise
            // 调用call方法
            then.call(result,r=>{
                // 继续调用自己 ，r就是then里面的res
                handlePromise(r,newPromise,resolve, reject)
            },e=>{
                reject(e)
            })
        }else{
            resolve(result)
        }

    }else{
        // 返回普通值
        resolve(result)
    }
}
class NewPromise {
  // 初始状态为 PEDDING
  status = PEDDING
  result = undefined
  reason = undefined
  // 发布订阅者模式
  // 目的是为了实现异步
  onResolveArr = []
  onRejectArr = []
  constructor(exc) {
    const resolve = (result) => {
      if (this.status === PEDDING) {
        this.result = result
        this.status = RESOLVE
        // 执行发布者
        this.onResolveArr.map((fn) => fn())
      }
    }
    const reject = (reason) => {
      if (this.status === PEDDING) {
        this.reason = reason
        this.status = REJECT
        // 执行发布者
        this.onRejectArr.map((fn) => fn())
      }
    }
    exc(resolve, reject)
  }

  then(onResolve, onReject) {
    const newPromise = new NewPromise((resolve, reject) => {
      if (this.status === RESOLVE) {
        setTimeout(() => {
            const result =  onResolve(this.result)
            handlePromise(result,newPromise,resolve, reject)
         
        }, 0)
      }
      if (this.status === REJECT) {
        setTimeout(() => {
            const result = onReject(this.reason)
            handlePromise(result,newPromise,resolve, reject)
        }, 0)
      }
      // 发布订阅者模式
      if (this.status === PEDDING) {
        // 将订阅者添加到数组里面
        this.onResolveArr.push(() => {
            const result = onResolve(this.result)
            handlePromise(result,newPromise,resolve, reject)
        })
        this.onRejectArr.push(() => {
            const result = this.onReject(this.reason)
            handlePromise(result,newPromise,resolve, reject)
        })
      }
    })
    return newPromise
  }
}

// let yan = new Promise((resole, reject) => {
//     resole(\'闫大爷真帅\')
// })
// yan.then(res => {
//     console.log(res)
// })

let newYan = new NewPromise((resole, reject) => {
  setTimeout(() => {
    resole(\'new闫大爷真帅\')
    return \'1111\'
  }, 3000)
})
newYan
  .then((res) => {
    console.log(res)
    return {name:\'yan\'}
  })
  .then((res) => {
    console.log(res)
  })

console.log(11111111)