手写 Promise 系列 --- 2

在上一篇 手写 Promise 系列 --- 1 中,我们达成了两个目标

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

稍微解释以下:

• 其中状态改变,是基于 Promise 本身提供了两个内置函数, resolve 和 reject . 它们根据 executor 内部逻辑异步的更新当前 promise 的状态.
• then 接收两种状态对应的回调函数,它一直都是同步的.

这一次需要达成的目标:

• Promise.prototype.then [❓]

---

实现 Promise 的链式调用.

先看常见的Promise链式条用的外观.

let p = new Promise ((resolve,reject) => {
    setTimeout(() => {
        resolve(100)
    },1000)
})

p
.then(data=>{
    console.log(data) // 100
    return 1000
})
.then(data=>{
    console.log(data) // 1000
})

首先别的说.既然then可以链式调用,说明它至少返回了一个Promsie对象.

Promise.prototype.then = function (onResolved,onRejectd) {
    //.... 其他逻辑
    
    return this
}

第二个点: 我们利用 new 的方式创建实例的时候,状态的改变是异步的,由executor自己异步回调函数里调用由 Promise提供的reject or resolve 来改变.
而 then 都是同步的追加一堆 onResolved 和 onRejected . 所以,在调用实际上,肯定是先 reject or resolve.然后才是 then 追加的一堆 onResolved 和 onReject.(而不是调用)

第三个点: 第一次的 then 的回调函数接受的参数是由第一此在异步环境里调用 reject or resolve 来提供的.

fs.readFile(filePath,'utf-8',(err,data) => {
    err ? reject (err) : resolve(data)
})

基于上述三个点,开始写支持链式调用的 Promise

function RelaxPromise (executor) { 
  this.state = RelaxPromise.states.Pending // 通过构造函数创建的promise,默认状态是 pending
  this.value = null // 在executor异步环境回调里第一次调用 reject or resolve 获取到的值.
  this.resolvedCallbacks = [] // 通过链式then,同步追加的成功回调的方法列表.
  this.rejectedCallbacks = [] // 通过链式then,同步追缴的失败回调方法列表
  const _this = this // 当前实例拉取.

  function resolve (value) { 
    if (_this.state === RelaxPromise.states.Pending) {  // 状态从 pending --> resolve
      // 第一件事,改状态
      _this.state = RelaxPromise.states.Resolve
      // 第二件事,获取第一次在executor异步环境里获取到的参数 (resolve(100))
      _this.value = value
      // 第三件事,循环调用由then链式调用追加的成功回调函数
      _this.resolvedCallbacks.forEach(cb => (_this.value = cb(_this.value)))
    }
  }

  function reject (value) { 
    if (_this.state === RelaxPromise.states.Pending) { 
      _this.state = RelaxPromise.states.Reject
      _this.value = value
      _this.rejectedCallbacks.forEach(cb => (_this.value = cb(_this.value)))
    }
  }

  if (executor) executor(resolve, reject)
}

// 在创建实例promise对象时,then的主要目的就是往对应的数组里追加回调函数
RelaxPromise.prototype.then = function (onResolved, onReject) { 
  const onSuccess = typeof onResolved === 'function' ? onResolved : v => v
  const onFailed = typeof onReject === 'function' ? onReject : v => v
  this.resolvedCallbacks.push(onSuccess)
  this.rejectedCallbacks.push(onFailed)

  return this // 满足链式调用
}

RelaxPromise.states = {
  Pending: 'Pending',
  Resolve: 'Resolve',
  Reject: 'Reject'
}

测试代码

new RelaxPromise((resolve, reject) => { 
  setTimeout(() => {
    resolve(100)
  }, 1000);
}).then(data => { 
  console.log(data) // 100
  return 1000
}).then(data => { 
  console.log(data) // 1000
  return 10000
}).then(data => { 
  console.log(data)
})

输出结果

image.png

第二阶段手写 Promise 达成目标:

• 实现 promise 链式调用 [✅]

---

总结

• Promise 实例由 new 实例化,初始状态是 pending. 所以它存在一个改变状态的过程.
• then 用于同步追加一堆的 onResolved 和 onRejected . 在最后返回当前promise本身,来提供链式调用的前提.
• 这一堆的 onResolved 和 onRejected 是由 resolve or reject 为入口开始执行.
• reject or resolve 又是由 executor 内部的异步回调里来调用的.
• 相当于是一堆注册好的 onResolved 和 onRejectd 等待一个异步的回调的方法(reject or resolved)去激活他们调用.