手写一个promise的过程

Posted 2021-09-04 小顺石

实现promise的catch方法和对class的错误处理

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\'
  ) {
    // 添加lock字段，如果第一个方法执行玩，不在执行第二个方法
    let lock = false
    try {
      const then = result.then
      if (typeof then === \'function\') {
        // 如果then方法是一个function 默认是promise
        // 调用call方法
        then.call(
          result,
          (r) => {
            if (lock) return
            // 继续调用自己 ，r就是then里面的res
            handlePromise(r, newPromise, resolve, reject)
            lock = true
          },
          (e) => {
            if (lock) return
            reject(e)
            lock = true
          }
        )
      } else {
        resolve(result)
      }
    } catch (error) {
      reject(error)
    }
    // 判断result是否有then方法
  } 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())
      }
    }
    // 处理出错函数的方法
    try {
      exc(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onResolve, onReject) {
    // 判断onResolve是不是一个方法
    onResolve = typeof onResolve === \'function\' ? onResolve : (data) => data
    onReject = typeof onReject === \'function\' ? onReject : (err) => {
      throw new Error(\'onReject必须是一个方法\' + err)
    }

    const newPromise = new NewPromise((resolve, reject) => {
      if (this.status === RESOLVE) {
        setTimeout(() => {
          try {
            const result = onResolve(this.result)
            handlePromise(result, newPromise, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      }
      if (this.status === REJECT) {
        setTimeout(() => {
          try {
            const result = onReject(this.reason)
            handlePromise(result, newPromise, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      }
      // 发布订阅者模式
      if (this.status === PEDDING) {
        // 将订阅者添加到数组里面
        this.onResolveArr.push(() => {
          try {
            const result = onResolve(this.result)
            handlePromise(result, newPromise, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
        this.onRejectArr.push(() => {
          try {
            const result = this.onReject(this.reason)
            handlePromise(result, newPromise, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      }
    })
    return newPromise
  }
  catch(onReject) {
    // 返回then方法，then是一个promise 第一个参数是undefined  需要在then方法里面处理
    return this.then(undefined, onReject)
  }
}

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

let newYan = new NewPromise((resole, reject) => {
  // 调用的时候，如果下面的方法报错 就需要处理错误，提示出错  在class NewPromise的方法里面调用try  catch
  setTimeout(() => {
    resole(\'new闫大爷真帅\')
    return \'1111\'
  }, 3000)
})
newYan
  .then((res) => {
    // 同理 ，如果这个方法也是错误的，在then方法里面需要try catch
    console.log(res)
    return { name: \'yan\' }
  })
  .then((res) => {
    // 同理 ，如果这个方法也是错误的，在then方法里面需要try catch
    console.log(res)
    console.log(res)
  })

console.log(11111111)