手写 Promise 系列 --- 3

在前两篇(手写 Promise 系列 --- 1)和(手写 Promise 系列 ---2) 中,达成了3个目标

• Promise 实例状态改变 [✅]
• 正确的使用 then 接受两种状态的回调函数 [✅]
• Promise 的链式调用 [✅]

这一次需要达成的目标:

• Promise.reject & Promise.resolve [❓]

---

Promise.reject & Promise.resolve

根据MDN文档的提示,Promise函数上有两个属性(也就是所谓的静态属性)方法.

• Promise.reject 返回一个状态为 reject 的 promise 对象.
• Promise.resolve 返回一个状态为 resolve 的 promise 对象.

根据上述的说明:

• 两个静态函数内部仍然是返回的一个 promise 实例. (仍然需要一个正常的实例promise代码去承载)
• 这个实例不像传统的 new Promise 那样,有状态的改变(通常这个状态的改变都是异步的),而直接是定义成了reject or resolve.

所以,根据上述两条推论,我们可以猜测,类似于 Promise.reject or Promise.resolve 这种调用模式,就不存在所谓的异步操作了.基本全是同步的.

于是开始书写代码:

function GqsMyPromise (executor) { 
  this.state = GqsMyPromise.states.PENDING // 对应使用 new GqsPromise(fn) 这种调用方式
  this.value = null
  this.resolvedCallbacks = []
  this.rejectedCallbacks = []

  const _this = this

  function resolve (value) { 
    if (_this.state === GqsMyPromise.states.PENDING) { 
      _this.state = GqsPromise.states.RESOLVE
      _this.value = value
      _this.resolvedCallbacks.forEach(resolve => (_this.value = resolve(_this.value)))
    }
  }

  function reject (value) { 
    if (_this.state === GqsMyPromise.states.PENDING) { 
      _this.state = GqsMyPromise.states.REJECT
      _this.value = value
      _this.rejectedCallbacks.forEach(reject => (_this.value = reject(_this.value)))
    }
  }

  // 注意,这里是里用new Promise(f) 的方式,创建 promise 实例,并且正确的传入的executor 时候的调用逻辑.
  // 也就是这个promise 是存在异步状态改变的.  
  if (typeof executor === 'function') executor(resolve, reject)
}


GqsMyPromise.prototype.then = function (onResolved, onReject) { 
  const resolved = typeof onResolved === 'function' ? onResolved : v => v 
  const rejected = typeof onReject === 'function' ? onReject : v => v

  switch (this.state) {
    case GqsMyPromise.states.PENDING: // 注意,能到这里,那一定是用 new Promise 创建实例的.
      this.rejectedCallbacks.push(rejected)
      this.resolvedCallbacks.push(resolved)
      break;
    case GqsMyPromise.states.REJECT: // 能到这里的,一定是用 Promise.reject(value) 创建的 promise实例.它没有状态的改变(也就是没有异步的这个过程) // 所以,就有必要追加,直接调用即可.
      this.value = rejected(this.value)
      break;
    case GqsMyPromise.states.RESOLVE: // 能到这里的,一定是用 Promise.resolve(value) 创建的 promise实例.它没有状态的改变(也就是没有异步的这个过程) // // 所以,就有必要追加,直接调用即可.
      this.value = resolved(this.value)
      break;
  }

  return this
}

// 这个方法的职责,直接返回一个状态为 rejected 的 promise 实例即可.
GqsMyPromise.reject = function (value) { 
  const p = new GqsMyPromise()
  
  return Object.assign(p, {
    state: GqsMyPromise.states.REJECT,
    value
  })
}

//  这个方法的职责,直接返回一个状态为 resolved 的 promise 实例即可.
GqsMyPromise.resolve = function (value) { 
  const p = new GqsMyPromise()
  return Object.assign(p, {
    state: GqsMyPromise.states.RESOLVE,
    value
  })
}

// Promise 实例的三种状态
GqsMyPromise.states = {
  PENDING: 'PENDING',
  RESOLVE: 'RESOLVE',
  REJECT: 'REJECT'
}

console.log('------ GqsMyPromise.reject 测试 Begin ---------')

let rejectPromise = GqsMyPromise.reject('error!!!!')
rejectPromise.then(undefined, (err) => {
  console.log(err)
  return 'error2'
}).then(undefined, (err) => {
  console.log(err)
})

console.log('-----------  GqsMyPromise.reject 测试 End --------------')  

console.log('------ GqsMyPromise.resolve 测试 Begin ---------')
let resolvePromise = GqsMyPromise.resolve('success')
resolvePromise.then(data => { 
  console.log(data)
  return 'success2'
  
}, undefined)
  .then(data => {
  console.log(data)
})
console.log('-----------  GqsMyPromise.resolve 测试 End --------------')  


// GqsPromise.reject & GqsPromise.reject 代码都是同步的,因为promise状态直接就是 reject or resolve 了.它没有异步修改promise状态的这个过程.
 

查看结果:

relax-2:手写Promise relax$ node PromiseX.js 
------ GqsMyPromise.reject 测试 Begin ---------
error!!!!
error2
-----------  GqsMyPromise.reject 测试 End --------------
------ GqsMyPromise.resolve 测试 Begin ---------
success
success2
-----------  GqsMyPromise.resolve 测试 End --------------

---

达成目标

• Promise 实例状态改变 [✅]
• 正确的使用 then 接受两种状态的回调函数 [✅]
• Promise 的链式调用 [✅]
• Promise.reject & Promise.resolve 静态方法完成,并完成链式调用[✅]

---

总结:

• Promise.reject 和 Promise.resolve 是直接返回状态为 resolve or reject 的 Promise 实例.
• 它和普通的使用 new Promise 还不一样. 因为 new Promise 一般都搭配一个异步的操作,用来改变当前 Promise 的状态.
• Promise.reject/resolve 直接就返回一个 reject/resolve 的promise,状态是同步的.所以后续的then以及链式调用都是基于同步的方式去调用(所以,就不需要像 new Promise 那样,需要把reject or resolve 缓存起来,以便异步修改状态完成之后,再去调用)