手写 Promise(二)

状态不可变性

new Promise((resolve, reject) => {
		// 注意执行顺序
        // 先 resolve -》 reject
        resolve('bool is true')
        reject('bool is false')
    }).then(
    resolveResult => {
        // 只会执行到这一步
        console.log('resolveResult', resolveResult)
    }, 
    rejectResult => {
        console.log('rejectResult', rejectResult)
    }) 
// ---------------------------------
    new Promise((resolve, reject) => {
		// 注意执行顺序
        // 先reject  -》  resolve
        reject('bool is false')
        resolve('bool is true')
    }).then(
    resolveResult => {
        console.log('resolveResult', resolveResult)
    }, 
    rejectResult => {
    	// 只会执行到这一步
        console.log('rejectResult', rejectResult)
    }) 

异步执行resolve / reject

let testPromise = bool => {
	new Promise((resolve, reject) => {
   	 setTimeout(() => {
    	 if (bool) {
              resolve('bool is true')
          } else {
              reject('bool is false')
          }
    	}, 1000)
    }).then(
    resolveResult => {
        // 成功时执行此方法
        console.log('resolveResult', resolveResult)
    }, 
    rejectResult => {
        // 拒绝或者说失败的状态下执行此方法
        console.log('rejectResult', rejectResult)
    }) 
}
testPromise(true) // 1秒后 console输出  'resolveResult', bool is true
testPromise(false) // 1秒后 console输出 'resolveResult', bool is false

我们已经看到这种现象，现在就去实现

// 定义Promise的三种状态
const PENDING = 'PENDING'; // pending就是未决，
const FULFILLED = 'FULFILLED'; // resolve可以理解为成功，
const REJECTED = 'REJECTED'; // reject可以理解为拒绝。

class MyPromise{
  constructor(excutor) {
    excutor(this.resolve, this.reject)
  }
  
  resolveValue = undefined
  rejectValue = undefined
  resolveHandlerCache = [] // 初始值设为数组， 因为同一个Promise实例可多次调用 then父方法
  rejectHandlerCache = []
  status = PENDING
  
  resolve = (val) => {
   	// 状态不可变性
    // 当状态不是初始值 PENDING 时我们就不让行修改
    if (this.status !== PENDING) return
     this.resolveValue = val
     this.status = FULFILLED
     // 在resolve 执行后执行储存起来的 successHandler 方法
     // 这样解决异步问题
     wihle(this.resolveHandlerCache.length) {
     	
     	this.resolveHandlerCache.pop()()
	}
  }

  reject = (val) => {
  	if (this.status !== PENDING) return
  	this.rejectValue = val
    this.status = REJECTED
     // 在resolve 执行后执行储存起来的 rejectHandler 方法
     wihle(this.rejectHandlerCache.length) {
     	this.rejectHandlerCache.pop()()
	}
  }
  
  then(successHandler, rejectHandler) {
   	// 这两个方法不会同时执行 ---> 因此我们需要一个状态做判断
    if (this.status === FULFILLED) {
    	successHandler(this.resolveValue)
    } else if (this.status === REJECTED) {
    	rejectHandler(this.rejectValue)
    } else {
    	
    	// 当传入的excutor 内部执行的的是异步任务时
        // 当 then 方法执行时 this.status 是初始值 PENDING
        // 当异步任务执行后，才会去调用successHandler 或 rejectHandler 
        // 因此在 then	方法执行时我们现将传入的这两个方法保存来
        // 那么保存之后在什么情况下采取执行了？？？
	    this.resolveHandlerCache.push(() => {
        	successHandler(this.resolveValue)
		})
        this.rejectHandlerCache.push(() => {
        	rejectHandler(this.rejectValue)
        })
    }
  }
}

let testMyPromise = bool => {
	new MyPromise((resolve, reject) => {
   	 setTimeout(() => {
    	 if (bool) {
              resolve('bool is true')
          } else {
              reject('bool is false')
          }
    	}, 1000)
    }).then(
    resolveResult => {
        // 成功时执行此方法
        console.log('resolveResult', resolveResult)
    }, 
    rejectResult => {
        // 拒绝或者说失败的状态下执行此方法
        console.log('rejectResult', rejectResult)
    }) 
}
testMyPromise(true) // 1秒后 console输出  'resolveResult', bool is true
testMyPromise(false) // 1秒后 console输出 'resolveResult', bool is false

下一章节演示 then 方法的链式调用

未完待续·······