乐趣区

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

jiezi

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

回顾：Promise 源码渐进式解读（一）

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

Promise.resolve – 源码

/** Promise 构造函数的 resolve 属性，指向函数
 * 参数 value：解决值
 */
Promise.resolve = function (value) {
  /* 如果解决值的 constructor 属性指向 Promise 构造函数（即解决值是 Promise 实例）*/
  if (value && typeof value === 'object' && value.constructor === Promise) {return value // 返回这个 Promise 实例}

  /* 解决值不是 Promise 实例，返回新的 Promise 实例并调用其胜利回调，参数作为解决值 */
  return new Promise(function (resolve) {resolve(value)
  })
}
  • 调用Promise.resolve()，相当于new Promise(resolve=>{resolve()})，参数作为解决值
  • 若参数为 Promise 对象，则返回这个对象

Promise.reject – 源码

/** Promise 构造函数的 reject 属性，指向函数
 * 参数 value：回绝理由
 */
Promise.reject = function (value) {
  /* 返回新的 Promise 实例并调用其失败回调，参数作为回绝理由 */
  return new Promise(function (resolve, reject) {reject(value)
  })
}
  • 调用Promise.reject，相当于new Promise(resolve=>{reject()})，参数作为回绝理由
  • 与 Promise.resolve() 不同的是 ，即使参数为Promise 对象，也将其整体作为 new Promise 失败回调时的回绝理由

Promise.resolve & Promise.reject – 阶段测试

  • Promise.resolve和 Promise.reject 其实就是 new Promise 的封装，留神察看 参数为 Promise 实例时二者后果上的不同
Promise.resolve(3) // 'resolve:3'，解决值为根本类型
/* self 为 Promise {_state: 1, _handled: false, _value: 3, _deferreds: [] } */
Promise.resolve({val: 3}) // 'resolve:[object Object]'，解决值为一般对象
/* self 为 Promise {_state: 1, _handled: false, _value: { val: 3}, _deferreds: []} */
Promise.resolve(Promise.resolve(3)) // 'resolve:3'，解决值为期约实例
/* self 为 Promise {_state: 1, _handled: false, _value: 3, _deferreds: [] } */
Promise.resolve({
  // 解决值为 thenable 对象
  value: 3,
  then: function () {console.log(this) // {value: 3, then: [Function: then] }，this 指向解决值自身
    console.log(this.value) // 3
  },
})
Promise.reject(3) // 'reject:3'，回绝理由为根本类型
/* self 为 Promise {_state: 2, _handled: false, _value: 3, _deferreds: [] } */
Promise.reject(Promise.resolve(3)) // 'reject:[object Object]'，回绝理由为期约实例（此处与 Promise.resolve()辨别）/* self 为 Promise {_state: 2, _handled: false, _value: Promise { _state: 1, _handled: false, _value: 3, _deferreds: [] }, _deferreds: []} */

Promise.\_immediateFn – 源码

/** Promise 构造函数的_immediateFn 属性，指向函数
 * 参数 fn：要执行的办法（** 留神：是异步调用 **）*/
var setTimeoutFunc = setTimeout
var setImmediateFunc = typeof setImmediate !== 'undefined' ? setImmediate : null // 判断浏览器是否有 setImmediate 办法

Promise._immediateFn =
  typeof setImmediateFunc === 'function' // 判断 setImmediateFunc 是否为函数对象
    ? function (fn) {setImmediateFunc(fn) // 异步调用 fn 办法（立刻）}
    : function (fn) {setTimeoutFunc(fn, 0) // 异步调用 fn 办法（0 毫秒后）}
  • 依据浏览器是否有 setImmediate 办法，指向不同
  • 但必由之路，都是 异步执行 传入的办法

Promise.\_unhandledRejectionFn – 源码

/** Promise 构造函数的_unhandledRejectionFn 属性，指向函数
 * 参数 err：回绝理由
 */
Promise._unhandledRejectionFn = function _unhandledRejectionFn(err) {if (typeof console !== 'undefined' && console) {console.warn('Possible Unhandled Promise Rejection:', err) // 浏览器给出正告
  }
}
  • 封装：失败回调时，在浏览器给出正告

finale() – 测试代码

  • 更新手写的测试 finale() 办法，退出浏览器正告，使其更趋近于源码，不便做阶段测试
/** 测试用的 finale()办法
 * 参数 self：（期约）实例
 */
function finale(self) {// console.log(self)
  // if (self._state === 1) {//   console.log('resolve:' + self._value)
  // } else if (self._state === 2) {//   console.log('reject:' + self._value)
  // } else if (self._state === 3) {//   console.log('resolve value is Promise')
  // }

  /* 如果_state 的值为 2（失败回调），且_deferreds 数组长度为 0，则给出正告 */
  if (self._state === 2 && self._deferreds.length === 0) {
    /**
     * 调用 Promise 构造函数的_immediateFn 办法
     * 参数 fn：要执行的正告办法
     */
    Promise._immediateFn(function () {
      /* 如果未被解决过，则给出正告 */
      if (!self._handled) {
        /**
         * 调用 Promise 构造函数的._unhandledRejectionFn 办法
         * 参数 self._value：回绝理由
         */
        Promise._unhandledRejectionFn(self._value)
      }
    })
  }
}
  • 如果是失败回调（回绝的期约），且 _deferreds 数组长度为 0，则给出正告
  • _deferreds数组长度由 Promise.reject() 前面是否有 catch 决定，详见后续

浏览器正告 – 阶段测试

new Promise((resolve, reject) => {reject(2) // Possible Unhandled Promise Rejection: 2
})
Promise.reject(3) // Possible Unhandled Promise Rejection: 3
Promise.resolve(Promise.reject(4)) // Possible Unhandled Promise Rejection: 4
Promise.reject(Promise.reject(5)) // Possible Unhandled Promise Rejection: Promise {_state: 2, _handled: false, _value: 5, _deferreds: [] }

实现后果总结

  • Promise.resolve和 Promise.reject 对new Promise的根底上加以封装
  • Promise.resolve的参数若是期约，则返回该期约
  • 失败的回调临时会在浏览器给出正告

截至本节的代码 →

退出移动版