手写一个Promise方法设计

目前then之后是无法继续做链式调用(最后有补充)，没写的很详细，扩展性还是非常强的。 

// 定义promise状态的一些常量
const PROMISE_STATUS_PENDING = 'pending'
const PROMISE_STATUS_FULFILLED = 'fulfilled'
const PROMISE_STATUS_REJECTED = 'rejected'


// 类的设计
class HYPromise {
  constructor(executor) {
   // 初始化定义状态为pending状态
   this.status = PROMISE_STATUS_PENDING
   this.value = undefined
   this.reason = undefined
   const resolve = (value) => {
     if(this.status === PROMISE_STATUS_PENDING) {
        this.status = PROMISE_STATUS_FULFILLED
        // 利用queueMicrotask（微任务）延时调用
        queueMicrotask(() => { 
          this.value = value
          console.log('resolve被调用')
          // 如果写的严谨一些 还可以判断这个方法是否为空，不为空才继续执行
          this.onFulfilled(this.value)
        })
     }
     
   }
   const reject = (reason) => {
    if(this.status === PROMISE_STATUS_PENDING) {
        this.status = PROMISE_STATUS_REJECTED
        queueMicrotask(() => { 
          this.reason = reason
          console.log('reject被调用')
         this.onRejected(this.reason)
         })
        
       }
    
     }
   executor(resolve,reject)
 }
  then(onFulfilled, onRejected) {
   this.onFulfilled = onFulfilled
   this.onRejected = onRejected
  }
}


const promise = new HYPromise((resolve,reject) => {
 resolve()
 // 或者调用 reject()
})

// 调用then方法
promise.then(res => {
 console.log('res:', res)
},err => {
 console.log('err:', err)
})

手写Promise-then方法优化 

// 定义promise状态的一些常量
const PROMISE_STATUS_PENDING = 'pending'
const PROMISE_STATUS_FULFILLED = 'fulfilled'
const PROMISE_STATUS_REJECTED = 'rejected'


// 类的设计
class HYPromise {
  constructor(executor) {
   // 初始化定义状态为pending状态
   this.status = PROMISE_STATUS_PENDING
   this.value = undefined
   this.reason = undefined
   // 所有成功回调的保存
   this.onFulfilledFns = []
   // 所有失败回调的保存
   this.onRejectedFns = []
   const resolve = (value) => {
     if(this.status === PROMISE_STATUS_PENDING) {
        // 利用queueMicrotask（微任务）延时调用
        // 添加微任务
        queueMicrotask(() => { 
          if(this.status !== PROMISE_STATUS_PENDING) return
          this.status = PROMISE_STATUS_FULFILLED
          this.value = value
          console.log('resolve被调用')
          // 如果写的严谨一些 还可以判断这个方法是否为空，不为空才继续执行
          this.onFulfilledFns.forEach(fn => {
            fn(this.value)
          })
        })
     }
     
   }
   const reject = (reason) => {
    if(this.status === PROMISE_STATUS_PENDING) {
        // 添加微任务
        queueMicrotask(() => { 
          if(this.status !== PROMISE_STATUS_PENDING) return
          this.status = PROMISE_STATUS_REJECTED
          this.reason = reason
          console.log('reject被调用')
         this.onRejectedFns.forEach(fn => {
               fn(this.reason)
            })
         })
        
       }
    
     }
   executor(resolve,reject)
 }
  then(onFulfilled, onRejected) {
    // 1、第一种情况：如果在then调用的时候，状态已经确定下来
    if(this.status === PROMISE_STATUS_PENDING && onFulfilled) {
        onFulfilled(this.value)
    }
     if(this.status === PROMISE_STATUS_REJECTED && onRejected) {
        onRejected(this.reason)
    }
    // 2、第二种情况：将成功回调和失败的回调放到数组中
    if(this.status === PROMISE_STATUS_PENDING) {
        this.onFulfilledFns.push(onFulfilled)
        this.onRejectedFns.push(onRejected)
    }
  }
}


const promise = new HYPromise((resolve,reject) => {
 resolve(1111)
 // 或者调用 reject()
})

// then方法多次调用
promise.then(res => {
 console.log('res1:', res)
},err => {
 console.log('err2:', err)
})

promise.then(res => {
 console.log('res2:', res)
},err => {
 console.log('err2:', err)
})

// 在确定Promise状态之后，再次调用then
setTimeout(() => {
  promise.then(res => {
    console.log('res3:', res)
  }, err => {
   console.log('err3:', err)
 })
})

// 输出： res1: 1111
// res2: 1111
// res3: 1111