Promise的实现 then方法的具体实现（二）

目录

Promise的实现 then方法的具体实现（二）

一、封装handle方法用于调用指定的回调函数，根据执行的结果改变return的promise的状态

二、根据当前状态执行不同的操作

三、指定回调函数的默认值（完整的then方法）

---

Promise的实现 then方法的具体实现（二）

一、封装handle方法用于调用指定的回调函数，根据执行的结果改变return的promise的状态

1. 如果抛出异常，return的promise就会失败，reason就是error

2. 如果回调函数返回不是promise，return的promise就会成功，value就是返回的值

3. 如果回调函数返回的是promise，return的promise结果就是这个promise的结果

  Promise.prototype.then = function (onResolved, onRejected) {
    const self = this
    // 返回一个新的promise对象
    return new Promise((resolve, reject) => {
      //有可能调用onResolved 或者 onRejected
      /*
      调用指定的回调函数处理，根据执行的结果改变return的promise的状态
      */
      function handle(callback) {
        /*
          1.如果抛出异常，return的promise就会失败，reason就是error
          2.如果回调函数返回不是promise，return的promise就会成功，value就是返回的值
          3.如果回调函数返回的是promise，return的promise结果就是这个promise的结果
          */
        try {
          const result = callback(self.data)
          if (result instanceof Promise) {
            //3.如果回调函数返回的是promise，return的promise结果就是这个promise的结果
            // result.then(
            //   (value) => resolve(value),
            //   (reason) => reject(reason)
            // )
            //简单的写法
            result.then(resolve, reject)
          } else {
            //2.如果回调函数返回不是promise，return的promise就会成功，value就是返回的值
            resolve(result)
          }
        } catch (error) {
          //1.如果抛出异常，return的promise就会失败，reason就是error
          reject(error)
        }
      }
    })
  }

二、根据当前状态执行不同的操作

Promise.prototype.then = function (onResolved, onRejected) {
    const self = this
    // 返回一个新的promise对象
    return new Promise((resolve, reject) => {
      //有可能调用onResolved 或者 onRejected
      /*
      调用指定的回调函数处理，根据执行的结果改变return的promise的状态
      */
      function handle(callback) {}//同上
      if (self.status === PENDING) {
        // 当前状态还是pending状态，将回调函数保存起来
        self.callbacks.push({
          onResolved() {
            handle(onResolved)
          },
          onRejected() {
            handle(onRejected)
          },
        })
      } else if (self.status === RESOLVED) {
        //如果当前是resolved状态,异步执行onResolve并改变return的promise的状态
        setTimeout(() => {
          handle(onResolved)
        })
      } else {
        //如果当前是rejected状态,异步执行onRejected并改变return的promise的状态
        setTimeout(() => {
          handle(onRejected)
        })
      }
    })
  }

三、指定回调函数的默认值（完整的then方法）

  Promise.prototype.then = function (onResolved, onRejected) {
    onResolved =
      typeof onResolved === 'function' ? onResolved : (value) => value //向后传递成功的value
    //指定默认的失败的回调（实现错误/异常传透的关键点）
    onRejected =
      typeof onRejected === 'function' ?
      onRejected :
      (reason) => {
        throw reason
      } //向后传递失败的reason
    const self = this
    // 返回一个新的promise对象
    return new Promise((resolve, reject) => {
      //有可能调用onResolved 或者 onRejected
      /*
      调用指定的回调函数处理，根据执行的结果改变return的promise的状态
      */
      function handle(callback) {
        /*
          1.如果抛出异常，return的promise就会失败，reason就是error
          2.如果回调函数返回不是promise，return的promise就会成功，value就是返回的值
          3.如果回调函数返回的是promise，return的promise结果就是这个promise的结果
          */
        try {
          const result = callback(self.data)
          if (result instanceof Promise) {
            //3.如果回调函数返回的是promise，return的promise结果就是这个promise的结果
            // result.then(
            //   (value) => resolve(value),
            //   (reason) => reject(reason)
            // )
            //简单的写法
            result.then(resolve, reject)
          } else {
            //2.如果回调函数返回不是promise，return的promise就会成功，value就是返回的值
            resolve(result)
          }
        } catch (error) {
          //1.如果抛出异常，return的promise就会失败，reason就是error
          reject(error)
        }
      }
      if (self.status === PENDING) {
        // 当前状态还是pending状态，将回调函数保存起来
        self.callbacks.push({
          onResolved() {
            handle(onResolved)
          },
          onRejected() {
            handle(onRejected)
          },
        })
      } else if (self.status === RESOLVED) {
        //如果当前是resolved状态,异步执行onResolve并改变return的promise的状态
        setTimeout(() => {
          handle(onResolved)
        })
      } else {
        //如果当前是rejected状态,异步执行onRejected并改变return的promise的状态
        setTimeout(() => {
          handle(onRejected)
        })
      }
    })
  }