关于前端:Promise源码渐进式解读三

49次阅读

共计 6052 个字符,预计需要花费 16 分钟才能阅读完成。

关注前端小讴,浏览更多原创技术文章

回顾:Promise 源码渐进式解读(一)
回顾:Promise 源码渐进式解读(二)

残缺代码 + 正文,可对照浏览

Promise.prototype.then – 源码

/** Promise 原型的 then 属性,指向函数
 * 参数 onFulfilled:onResolved 处理程序,在期约兑现时执行的回调
 * 参数 onRejected:onRejected 处理程序,在期约回绝时执行的回调
 * 反对有限链式回调,每个 then()办法返回新的 Promise 实例
 */
Promise.prototype.then = function (onFulfilled, onRejected) {// console.log(this, 'then') // this 指向 then()前返回的 Promise 实例
  // console.log(this.constructor) // constructor 指向 Promise 构造函数
  // console.log(this.constructor === Promise) // true

  /* 创立一个新期约实例(相当于 new Promise(noop)),传入空办法 noop 作为执行器函数
     留神:每次调用.then()都创立新的 Promise 实例,但调用下一个.then()会将上一个 Promise 实例的_deferreds 数组扭转(放入下一个的 Handler 实例)!*/
  var prom = new this.constructor(noop) // -> var prom = new Promise(noop) -> var prom = new Promise(()=>{})
  // console.log(prom) // Promise {_state: 0, _handled: false, _value: undefined, _deferreds: [] },新期约
  // console.log(new Promise(noop)) // Promise {_state: 0, _handled: false, _value: undefined, _deferreds: [] },同上

  /**
   * handle()办法
   * 参数 this:then()前返回的上一个 Promise 实例
   * 参数 new Handler(onFulfilled, onRejected, prom):创立的 Handler 实例
   */
  handle(this, new Handler(onFulfilled, onRejected, prom))

  return prom // 返回新创建的期约实例,以便链式调用
}

function noop() {}
  • then指向的函数中的 this,指向以后then 前返回的 Promise 实例,因而 this.constructor 指向 Promise 构造函数
  • 每次调用 Promise.then 时:

    • 将空办法 noop 作为执行器函数,调用 new this.constructor() 创立一个新的空 Promise 实例
    • 还会新创建一个 Handler 实例,而后调用 handle() 办法
    • 最终都 返回新创建的期约实例 ,这是为了 反对有限链式回调
    • “调用下一个 .then() 会将上一个 Promise 实例的 _deferreds 数组扭转”,可后续再钻研

Handler 构造函数 – 源码

/** Handler 构造函数:打包 onFulfilled、onRejected 和 promise,作为一个整体不便前面调用
 * 参数 onFulfilled:resolve 回调函数
 * 参数 onRejected:reject 回调函数
 * 参数 promise:新的空 promise 实例
 */
function Handler(onFulfilled, onRejected, promise) {
  this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null // 是否有胜利回调,若没有则赋为 null
  this.onRejected = typeof onRejected === 'function' ? onRejected : null // 是否有失败回调,若没有则赋为 null
  this.promise = promise // Handler 的 promise,指向 prom,即在.then()中创立的新 Promise 实例
  // console.log(this.promise, 'new Handler')
  // console.log(this)
}
  • 接管 3 个参数:胜利回调、失败回调新的空 promise 实例

handle() – 测试代码

  • 在源码的根底上加以简化,不便做阶段测试
/** 测试用的 handle()办法
 * 参数 self:then()前返回的 Promise 实例
 * 参数 deferred:创立的 Handler 实例
 */
function handle(self, deferred) {// console.log(self)
  // console.log(deferred)

  /* deferred 为创立的 Handler 实例
    Handler {onFulfilled: [Function (anonymous)], // onFulfilled 处理程序,没有则为 null
      onRejected: [Function (anonymous)], // onRejected 处理程序,没有则为 null
      promise: Promise { // promise 属性指向一个新的 Promise 实例
        _state: 0,
        _handled: false,
        _value: undefined,
        _deferreds: []}
    }
  */

  /* 如果返回的期约实例的解决值为 promise 类型,_state=3 */
  while (self._state === 3) {self = self._value // 将解决值赋给返回的期约实例}

  /* 如果返回的期约实例是 pendding 状态,_state=0,即还没有执行 resolve()或 reject()办法 */
  if (self._state === 0) {self._deferreds.push(deferred) // 将 Handler 实例放入实例的_deferrends 数组,而后返回,持续期待
    console.log(self)
    return
  }

  /* 标记以后进行的 promise._handled 为 true */
  self._handled = true
  console.log(self)

  /* 通过事件循环异步来做回调的解决(留神:这里是异步的!)*/
  Promise._immediateFn(function () {
    var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected // 获取 onFulfilled 或 onRejected 处理程序

    /* 如果有 onFulfilled 或 onRejected 回调函数,则执行本人的回调 */
    try {
      /**
       * cb()办法:执行 onFulfilled 或 onRejected 处理程序
       * 参数 self._value:then()前返回的 Promise 实例的解决值 / 回绝理由
       */
      cb(self._value) // 执行回调
    } catch (e) {/* 若抛出谬误,则调用 reject()办法,参数为创立的 Handler 实例的 promise(新 Promise 实例)和谬误起因 */
      reject(deferred.promise, e)
      return
    }
  })
}
  • then前返回的期约实例,依据 _state 值的不同,做不同的解决

    • 返回非待定的期约,最终会执行 then 中的处理程序
    • 返回待定的期约,则不会执行 then 中的处理程序,但 会将 then 中生成的 Handler 实例放入 thenPromise实例的 _deferreds 数组
  • 执行 then 中的处理程序是 异步 的,会在所有同步操作都执行完才去执行

Promise.prototype.then – 阶段测试

new Promise((resolve, reject) => {}).then(() => {console.log(3) // then 前是未解决的期约,期约解决前不会执行处理程序
})
/* 执行到 handle()时,self._state 为 0,将 Handler 实例放入实例的_deferrends 数组,不再执行后续操作,self 为:Promise {
    _state: 0,
    _handled: false,
    _value: undefined,
    _deferreds: [
      Handler {onFulfilled: [Function (anonymous)], 
        onRejected: null, 
        promise: Promise {_state: 0, _handled: false, _value: undefined, _deferreds: []}
      }
    ]
  }
*/

new Promise((resolve, reject) => {
  /* 理论执行首个 resolve 或 reject 后,后续的 resolve 或 reject 不会再执行,这里仅把测试后果合并 */

  resolve(3) // 打印 res 为 3,解决值为根本类型
  /* self 为 Promise {_state: 1, _handled: true, _value: 3, _deferreds: [] } */
  resolve({val: 3}) // 打印 res 为{val: 3},解决值为一般对象
  /* self 为 Promise {_state: 1, _handled: true, _value: { val: 3}, _deferreds: []} */
  resolve(new Promise(() => {})) // 不打印 res,解决值为 pending 的期约实例
  /* self 与 new Promise((resolve, reject) => {}).then()基本相同,onFulfilled 不再是 null*/
  resolve(Promise.resolve(3)) // 打印 res 为 3,解决值为 fullfilled 的期约实例,将 fullfilled 的解决值赋给 self
  /* self 为 Promise {_state: 1, _handled: true, _value: 3, _deferreds: [] } */
  resolve({
    // 解决值为 thenable 对象
    value: 3,
    then: function () {console.log(this) // {value: 3, then: [Function: then] }
      console.log(this.value) // 3
    },
  })
  /* self 与 resolve(new Promise(() => {}))雷同 */
}).then((res) => {console.log(res) // then()前返回的 Promise 的解决值})

new Promise((resolve, reject) => {reject(3) // 打印 res 为 3
  /* self 为 Promise {_state: 2, _handled: true, _value: 3, _deferreds: [] } */
}).then(null, (err) => {console.log(err) // then()前返回的 Promise 的回绝理由})
  • 大体有了链式回调的雏形:

    • 可能依据 Promise 实例的状态,获取其解决值 / 回绝理由,并执行相应的处理程序(onResolveonReject
  • pedding状态的期约调用 then 后,会将 then 中生成的 Handler 实例放入其 _deferreds 数组

Promise.prototype.catch – 源码

/** Promise 原型的 catch 属性,指向函数
 * 参数 onRejected:onRejected 处理程序,在期约回绝时执行的回调
 * 反对有限链式回调,每个 catch()办法返回新的 Promise 实例
 */
Promise.prototype['catch'] = function (onRejected) {return this.then(null, onRejected)
}
  • Promise.prototype.then 上做一层封装,只接管 onRejected 处理程序

Promise.prototype.catch – 阶段测试

new Promise((resolve, reject) => {}).catch(() => {console.log(3) // catch 前是未解决的期约,期约解决前不会执行处理程序(同 then)})

new Promise((resolve, reject) => {
  /* 理论执行首个 resolve 或 reject 后,后续的 resolve 或 reject 不会再执行,这里仅把测试后果合并 */

  reject(4) // 4,回绝理由为根本类型
  /* self 为 Promise {_state: 2, _handled: true, _value: 4, _deferreds: [] } */
  reject({val: 4}) // {val: 4},回绝理由为一般对象
  /* self 为 Promise {_state: 2, _handled: true, _value: { val: 4}, _deferreds: []} */
  throw Error('error!') // 'Error: error!',抛出谬误
  /* self 为 Promise {_state: 2, _handled: true, _value: Error: error!, _deferreds: [] } */
  reject(new Promise(() => {})) // 'Promise {_state: 0, _handled: false, _value: undefined, _deferreds: [] }',期约自身作为回绝理由(需与 resolve 辨别)/* self 为 Promise {_state: 2, _handled: true, _value: Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [] }, _deferreds: []} */
  reject(Promise.resolve(3)) // 'Promise {_state: 1, _handled: false, _value: 3, _deferreds: [] }',同上,期约自身作为回绝理由,与期约状态无关
  /* self 为 Promise {_state: 2, _handled: true, _value: Promise { _state: 1, _handled: false, _value: 3, _deferreds: [] }, _deferreds: []} */
}).catch((err) => {console.log(err) // catch()前返回的 Promise 的回绝理由})
  • Promise.prototype.then 的后果大致相同,需辨别 catch 后期约的回绝理由是 Promise 实例的状况

实现后果总结

  • 单个 Promise.prototype.thenPromise.prototype.catch的链式回调(多个还未实现)

截至本节的代码 →

正文完
 0