Promise源码渐进式解读（五）

头像
小讴
    阅读 13 分钟
    关注前端小讴，阅读更多原创技术文章

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

    完整代码+注释，可对照阅读

    Promise源码解读系列的最后 1 篇，详解Promise构造函数的最后几个方法及.finally，封装isArray判断对象是否为数组：

    /* isArray方法：判断对象是否为数组 */
function isArray(x) {
  return Boolean(x && typeof x.length !== 'undefined')
}

    Promise.all - 源码

    /** Promise构造函数的all属性，指向函数
 * 参数arr：数组
 */
Promise.all = function (arr) {
  // 返回一个新期约
  return new Promise(function (resolve, reject) {
    if (!isArray(arr)) {
      return reject(new TypeError('Promise.all accepts an array')) // 参数必须是数组
    }
    var args = Array.prototype.slice.call(arr) // Array原型的slice方法，利用call绑定给arr（避免有自定义的slice方法）
    if (args.length === 0) return resolve([]) // 若数组长度为0，则立即执行执行器函数并返回，参数为空数组
    // ↑相当于：new Promise((resolve, reject) => resolve([]))

    var remaining = args.length

    /**
     * res()方法
     * 参数i：数组下标
     * 参数val：数组项
     */
    function res(i, val) {
      try {
        // console.log(args[i], val) // args[i]和val最初是一样的

        /* 如果该项为对象或函数对象，则对其then属性做特殊处理 */
        if (val && (typeof val === 'object' || typeof val === 'function')) {
          var then = val.then
          // 如果then指向一个函数（val是Promise类型或thenable对象），则做处理
          if (typeof then === 'function') {
            /* 将该项的then方法体内的this指向该项本身，并执行then()
               Promise.prototype.then原本接受2个参数onFulfilled和onRejected，将function(val){}和reject回调分别作为这两个方法传给.then()
                -> 创建Handler实例（this指向then前的Promise实例，即该项本身）
                -> 调用handle方法，根据_state进行下一步操作
                  -> 如_state为1，则调用Promise._immediateFn 
                  -> 调用onFulfilled（即function(val)），参数为期约的_value值，即调用function(self._value)
                  （若_state为0，则将Handler实例放入then()前Promise实例（该项本身）的_deferrends数组，同步执行暂停，整端代码执行终止，返回该项，即待定的期约）
            */
            then.call(
              val,
              function (val) {
                res(i, val) // 将期约的_value值作为val，再次调用res方法
              },
              reject
            )
            return
          }
        }

        /* 重写该项：若该项为解决的期约则被重写为其解决值/拒绝理由，若为非期约则不变 */
        args[i] = val
        // console.log(args[i], val)
        // console.log(args)

        /* 若所有的Promise都执行完毕（没有待定的），则执行执行器函数的resolve回调，参数为处理后的数组 */
        if (--remaining === 0) {
          resolve(args) // doResolve()内部的done控制着resolve/reject方法只执行一次
        }
      } catch (ex) {
        /* 只要其中一项出现异常，则全部执行退出，进入catch异常处理 */
        reject(ex) // doResolve()内部的done控制着resolve/reject方法只执行一次
      }
    }

    /* 循环数组，针对每一项执行res()方法 */
    for (var i = 0; i < args.length; i++) {
      res(i, args[i])
    }
  })
}
    • 参数必须是数组，若为空数组则等同于new Promise((resolve, reject) => resolve([]))
    • 循环参数数组，若数组项为解决的期约，则被重写为其解决值/拒绝理由，若为非期约则不变

    • 若所有的Promise都执行完毕（没有待定的），则执行执行器函数的resolve回调，参数为处理后的数组

      • 若有待定的期约，则会一直等待，直到执行完毕
    • 只要其中一项出现异常，则全部执行退出，进入catch异常处理

    Promise.all - 阶段测试

    setTimeout(
  console.log,
  0,
  Promise.all(), // 参数不是数组
  /* Promise { _state: 2, _handled: false, _value: 'TypeError: Promise.all accepts an array', _deferreds: null } */
  Promise.all([]), // 参数是空数组
  /* Promise { _state: 1, _handled: false, _value: [], _deferreds: null } */
  new Promise((resolve, reject) => resolve([])), // 等效于Promise.all([])
  Promise.all([1, 2, 3]), // 参数是数组，数组的每项不是Promise对象
  /* Promise { _state: 1, _handled: false, _value: [ 1, 2, 3 ], _deferreds: null } */
  Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]), // 参数是数组，数组的每项是解决的Promise对象
  /* Promise { _state: 1, _handled: false, _value: [ 1, 2, 3 ], _deferreds: null } */
  Promise.all([
    Promise.resolve(true),
    Promise.resolve(true),
    Promise.resolve(true),
  ]),
  /* Promise { _state: 1, _handled: false, _value: [true, true, true], _deferreds: null } */
  Promise.all([Promise.resolve(1), Promise.reject(2), Promise.resolve(3)]), // 参数是数组，数组中有拒绝的Promise对象
  /* Promise { _state: 2, _handled: false, _value: 2, _deferreds: null } */
  Promise.all([Promise.resolve(1), new Promise(() => {}), Promise.resolve(3)]) // 参数是数组，数组中有待定的Promise对象
  /* Promise { _state: 0, _handled: false, _value: undefined, _deferreds: null } */
)

    Promise.race - 源码

    /** Promise构造函数的race属性，指向函数
 * 参数arr：数组
 */
Promise.race = function (arr) {
  // 返回一个新期约
  return new Promise(function (resolve, reject) {
    if (!isArray(arr)) {
      return reject(new TypeError('Promise.race accepts an array')) // 参数必须是数组
    }
    /* 循环数组，针对每一项执行resolve()和.then()方法（若参数为空数组，则不执行，返回待定的期约） */
    for (var i = 0, len = arr.length; i < len; i++) {
      /**
       * Promise.resolve()方法
       * 参数arr[i]：数组项
       */
      Promise.resolve(arr[i]) // 返回新期约
        /* Promise.prototype.then()方法
           Promise.prototype.then原本接受2个参数onFulfilled和onRejected，将fn的resolve和reject回调分别作为这两个方法传给.then()
           -> 创建Handler实例（this指向then前的Promise实例，即Promise.resolve()返回的新期约）
           -> 调用handle方法，根据_state进行下一步操作
              -> 如_state为1，则调用Promise._immediateFn
              -> 调用onFulfilled，参数为期约的_value值，即调用function(self._value)
        */
        .then(resolve, reject) // doResolve()内部的done控制着resolve/reject方法只执行一次，因此只有最先落定（解决或拒绝）的Promise执行了resolve/reject，后面的Promise都不执行
    }
  })
  // 以Promise.race([3, 2, 1])为例，可以简化为new Promise((resolve,reject)=>{Promise.resolve(3).then(resolve, reject)})
}
    • 参数必须是数组，若为空数组则返回待定的期约
    • 循环参数数组，按顺序调用Promise.resolve，参数为数组项
    • 只有最先落定（解决或拒绝）的Promise，根据其状态执行resolve/reject，后面的都不执行

    • 核心思路比对：

      • Promise.all：resolve数组所有项（如果该项是期约，则用其解决值/拒绝理由替换）
      • Promise.race：逐个Promise.resolve数组项（如果返回的期约已解决/拒绝，则不再Promise.resolve后面的项）

    Promise.race - 阶段测试

    setTimeout(
  console.log,
  0,
  Promise.race(), // 参数不是数组
  /* Promise { _state: 2, _handled: false, _value: 'TypeError: Promise.race accepts an array', _deferreds: null } */
  Promise.race([]), // 参数是空数组
  /* Promise { _state: 0, _handled: false, _value: undefined, _deferreds: null } */
  Promise.race([3, 2, 1]), // 参数是数组，数组的每项不是Promise对象
  /* Promise { _state: 1, _handled: false, _value: 3, _deferreds: null } */
  Promise.resolve(3), // 等效于Promise.race([3, 2, 1])
  /* Promise { _state: 1, _handled: false, _value: 3, _deferreds: null } */
  Promise.race([Promise.resolve(3), Promise.resolve(2), Promise.resolve(1)]), // 参数是数组，最先落定解决的Promise对象
  /* Promise { _state: 1, _handled: false, _value: 3, _deferreds: null } */
  Promise.race([Promise.reject(1), Promise.resolve(2), Promise.resolve(3)]), // 参数是数组，最先落定拒绝的Promise对象
  /* Promise { _state: 2, _handled: false, _value: 1, _deferreds: null }
     Possible Unhandled Promise Rejection: 1 */
  Promise.race([new Promise(() => {}), Promise.resolve(2), Promise.resolve(1)]) // 参数是数组，最先落定解决的Promise对象
  /* Promise { _state: 1, _handled: false, _value: 2, _deferreds: null } */
)

    Promise.prototype.finally - 源码

    /** Promise原型的finally属性，指向函数
 * 参数callback：onFinally处理程序，在期约无论兑现还是拒绝后，最终执行的回调
 */
Promise.prototype['finally'] = function (callback) {
  // console.log(this, 'finally') // this指向finally()前返回的Promise实例
  // console.log(this.constructor) // constructor指向Promise构造函数
  // console.log(this.constructor === Promise) // true
  var constructor = this.constructor

  /* 调用Promise.prototype.then()方法，以下文setTimeout中的测试为例：
     -> 创建Handler实例（this指向finally()前的Promise实例），创建新Promise实例
     -> 调用handle()，_state为1，调用Promise._immediateFn，调用onFulfilled，调用后返回Promise实例（调用过程见onFulfilled内部）
     -> 调用resolve()，传入Handler实例的promise和onFulfilled返回值（是一个Promise实例），将_state赋值为3，_value赋值为onFulfilled返回的Promise实例
     -> 调用finale()，其_deferreds为[]，赋为null后执行结束
     -> 返回.then()内部创建的Promise实例：
        Promise { 
          _state: 3,
          _handled: false,
          _value: Promise {
            _deferreds: null,
            _handled: false,
            _state: 1,
            _value: 2,
          }
          _deferreds: null
        }
  */
  return this.then(
    /* onFulfilled处理程序 */
    function (value) {
      /* 调用过程，以下文setTimeout中的测试为例：
        -> 调用callback，打印finally3，返回3
        -> 调用Promise.resolve()，创建解决的Promise实例，解决值为callback返回值3
           此时then前的Promise实例为：Promise { _state: 1, _handled: false, _value: 3, _deferreds: null }
        -> 调用.then()（内部this指向Promise.resolve()返回的期约，_state为1，_value为3），创建Handler实例（只有onFulfilled），创建新Promise实例
        -> 调用handle()，内部state为1，将handled置为true，调用Promise._immediateFn，调用onFulfilled（即：function() {return value}），返回的value是finally前Promise实例的_value，即2
        -> 调用resolve()，传入Handler实例的promise和onFulfilled返回值2，将_state赋值为1，_value赋值为2
        -> 调用finale()，其_deferreds为[]，赋为null后执行结束
        -> 返回.then()内部创建的Promise实例（作为参数，传递给上层resolve()方法）
           返回的Promise实例为：Promise { _state: 1, _handled: false, _value: 2, _deferreds: null }
      */
      // return constructor.resolve(callback())
      return constructor.resolve(callback()).then(function () {
        // console.log(value) // finally()前返回的Promise实例的解决值
        return value
      })
    },
    /* onRejected处理程序 */
    function (reason) {
      return constructor.resolve(callback()).then(function () {
        // console.log(reason) // finally()前返回的Promise实例的拒绝理由
        return constructor.reject(reason) // 与onFulfilled不同的是，内部返回拒绝的期约，拒绝理由为finally()前Promise实例的拒绝理由
        /* 
          Promise._immediateFn最后一步均为调用resolve()方法，第二个参数若不是期约，则_state值会在resolve()中被赋为1
          因此为了区分与onFulfilled的区别，返回拒绝的期约（而不是拒绝理由），第二个参数是期约，_state值在resolve()中被赋为3
          因此最终返回的期约，会多嵌套一层Promise（onFulfilled嵌套2层，onRejected嵌套3层），最内层为这个拒绝的期约
          Promise { 
            _state: 3,
            _handled: false,
            _value: Promise {
              _deferreds: null,
              _handled: false,
              _state: 3,
              _value: Promise { // 最内层为拒绝的期约
                _deferreds: null,
                _handled: false,
                _state: 2, // 此处的_state
                _value: 2
              }
            }
            _deferreds: null
          }
        */
      })
    }

    /* 内层Promise实例赋给外层Promise实例的_value，逐层依次赋值递推 */
  )
}

    Promise.prototype.finally - 阶段测试

    setTimeout(
  console.log,
  0,
  Promise.resolve(2).finally(() => {
    console.log('finally3') // 打印'finally3'
    return 3
  })
  /* Promise为
    Promise {
      _state: 3,
      _handled: false,
      _value: Promise {
        _state: 0,
        _handled: false,
        _value: undefined,
        _deferreds: null
      },
      _deferreds: null
    }
  */
  Promise.reject(2).finally(() => {
    console.log('finally4') // 打印'finally4'
    return 4
  })
  /* Promise为
    Promise {
      _state: 3,
      _handled: false,
      _value: Promise {
        _state: 3,
        _handled: false,
        _value: Promise {
          _state: 2,
          _handled: false,
          _value: 2,
          _deferreds: null
        },
        _deferreds: null
      },
      _deferreds: null
    }
  */
)

    Promise.allSettled - 源码

    /** Promise构造函数的allSettled属性，指向函数
 * 参数arr：数组
 */
Promise.allSettled = function (arr) {
  // console.log(this) // this指向Promise构造函数
  var P = this

  // 返回一个新期约
  return new P(function (resolve, reject) {
    // 参数必须是数组
    if (!(arr && typeof arr.length !== 'undefined')) {
      return reject(
        new TypeError(
          typeof arr +
            ' ' +
            arr +
            ' is not iterable(cannot read property Symbol(Symbol.iterator))'
        )
      )
    }

    var args = Array.prototype.slice.call(arr) // Array原型的slice方法，利用call绑定给arr（避免有自定义的slice方法）
    if (args.length === 0) return resolve([]) // 若数组长度为0，则立即执行执行器函数并返回，参数为空数组
    // ↑相当于：new Promise((resolve, reject) => resolve([]))

    var remaining = args.length

    /**
     * res()方法
     * 参数i：数组下标
     * 参数val：数组项
     */
    function res(i, val) {
      // console.log(args[i], val) // args[i]和val最初是一样的

      /* 如果该项为对象或函数对象，则对其then属性做特殊处理 */
      if (val && (typeof val === 'object' || typeof val === 'function')) {
        var then = val.then
        // 如果then指向一个函数（val是Promise类型或thenable对象），则做处理
        if (typeof then === 'function') {
          /* 将该项的then方法体内的this指向该项本身，并执行then()
             Promise.prototype.then原本接受2个参数onFulfilled和onRejected，将function(val){}和function(e){}回调分别作为这两个方法传给.then()
             -> 创建Handler实例（this指向then前的Promise实例，即该项本身）
             -> 调用handle方法，根据_state进行下一步操作
               -> 如_state为1，则调用Promise._immediateFn
               -> 调用onFulfilled（即function(val)），参数为期约的_value值，即调用function(self._value)
               （若_state为0，则将Handler实例放入then()前Promise实例（该项本身）的_deferrends数组，同步执行暂停，整端代码执行终止，返回该项，即待定的期约）
          */
          then.call(
            val,
            function (val) {
              res(i, val) // 将期约的_value值作为val，再次调用res方法
            },
            function (e) {
              args[i] = { status: 'rejected', reason: e } // 将该项重写为{status:'rejected',reason:错误原因}
              /* 若所有的项都执行完毕，则执行执行器函数的resolve回调，参数为处理后的数组 */
              if (--remaining === 0) {
                resolve(args)
              }
            }
          )
          return
        }
      }

      /* 重写该项：
         若该项为解决的期约，则被重写为{status:'fulfilled',value:解决值}
         若该项为拒绝的期约，则被重写为{status:'rejected',reason:拒绝理由}
         若该项为非期约，则被重写为对象{status:'fulfilled',value:该项}
      */
      args[i] = { status: 'fulfilled', value: val }
      // console.log(args[i], val)
      // console.log(args)

      /* 若所有的Promise都执行完毕（没有待定的），则执行执行器函数的resolve回调，参数为处理后的数组 */
      if (--remaining === 0) {
        resolve(args) // doResolve()内部的done控制着resolve/reject方法只执行一次
      }
    }

    /* 循环数组，针对每一项执行res()方法 */
    for (var i = 0; i < args.length; i++) {
      res(i, args[i])
    }
  })
}
    • 参数必须是数组，若为空数组则等同于new Promise((resolve, reject) => resolve([]))

    • 循环参数数组，并重写：

      • 若该项为解决的期约，则被重写为{status:'fulfilled',value:解决值}
      • 若该项为拒绝的期约，则被重写为{status:'rejected',reason:拒绝理由}
      • 若该项为非期约，则被重写为对象{status:'fulfilled',value:该项}

    • 若所有的Promise都执行完毕（没有待定的），则执行执行器函数的resolve回调，参数为处理后的数组

      • 若有待定的期约，则会一直等待，直到执行完毕

    Promise.allSettled - 阶段测试

    setTimeout(
  console.log,
  0,
  Promise.allSettled(), // 参数不是数组
  /* Promise { _state: 2, _handled: false, _value: 'TypeError: undefined undefined is not iterable(cannot read property Symbol(Symbol.iterator))', _deferreds: null } */
  Promise.allSettled([]), // 参数是空数组
  /* Promise { _state: 1, _handled: false, _value: [], _deferreds: null } */
  Promise.allSettled([3, 2, 1]), // 参数是数组，数组的每项都不是Promise对象
  /* 
    Promise {
      _state: 1,
      _handled: false,
      _value: [
        { status: 'fulfilled', value: 3 },
        { status: 'fulfilled', value: 2 },
        { status: 'fulfilled', value: 1 }
      ],
      _deferreds: null
    }
  */
  Promise.allSettled([
    Promise.resolve(3),
    Promise.resolve(2),
    Promise.resolve(1),
  ]), // 参数是数组，每项都是解决的Promise对象
  /* 
    Promise {
      _state: 1,
      _handled: false,
      _value: [
        { status: 'fulfilled', value: 3 },
        { status: 'fulfilled', value: 2 },
        { status: 'fulfilled', value: 1 }
      ],
      _deferreds: null
    }
  */
  Promise.allSettled([
    Promise.resolve(1),
    Promise.reject(2),
    Promise.resolve(3),
  ]), // 参数是数组，每项都是Promise对象，有拒绝的期约
  /* 
    Promise {
      _state: 1,
      _handled: false,
      _value: [
        { status: 'fulfilled', value: 1 },
        { status: 'rejected', reason: 2 },
        { status: 'fulfilled', value: 3 }
      ],
      _deferreds: null
    }
  */
  Promise.allSettled([
    Promise.resolve(2),
    new Promise(() => {}),
    Promise.resolve(1),
  ]) // 参数是数组，每项都是Promise对象，有待定的期约
  /* Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [] } */
)

    实现结果总结

    • 实现Promise构造函数方法：Promise,all、Promise.race、Promise.allSettled
    • 实现Promise原型方法：Promise.prototype.finally

    截至本节的代码 →

    前端javascriptpromise源码
    小讴
    217 声望16 粉丝
    « 上一篇
    Promise源码渐进式解读（四）
    下一篇 »
    《javascript高级程序设计》学习笔记 | 21.2.错误处理

    引用和评论

    推荐阅读
    头像
    手写一个Virtual DOM及源码解析

    小讴阅读 303

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.7k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 5k评论 3

    头像
    CSS团队协作规范

    寒青赞 37阅读 5.1k

    头像
    前端如何入门 Go 语言

    robin赞 27阅读 8.1k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 20阅读 4.4k评论 4

    头像
    前端开发工具

    寒青赞 18阅读 5k

    0 条评论
    得票最新