标签：resolve failCallback value reason 源码 Promise reject catch promise

• 手写 Promise 源码之 catch 方法实现
  • 场景
  • 代码实现

手写 Promise 源码之 catch 方法实现

场景

const MyPromise = require('./myPromise')

function p1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}

function p2() {
  return new MyPromise((resolve, reject) => {
    // reject('p2 reject')
    resolve('p2 resolve')
  })
}

p2()
  .then(value => console.log(value))
  .catch(reason => console.log(reason))

代码实现

关键代码

  catch(failCallback) {
    return this.then(undefined, failCallback)
  }

const PENDING = 'pengding' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' /// 失败

class MyPromise {
  constructor(exectuor) {
    // 捕获执行器中的错误
    try {
      exectuor(this.resolve, this.reject)
    } catch (e) {
      this.reject(e)
    }
  }

  // promise 状态
  status = PENDING

  // 成功之后的值
  value = undefined

  // 失败之后的原因
  reason = undefined

  // 成功回调
  successCallback = []

  // 失败回调
  failCallback = []

  //  此处的箭头函数是为了使 this 指向该函数的实例对象
  resolve = value => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return
    // 将状态更改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在，如果存在就调用
    // this.successCallback && this.successCallback(this.value)
    while (this.successCallback.length) {
      this.successCallback.shift()()
    }
  }

  reject = reason => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return
    // 将状态更改为失败
    this.status = REJECTED
    // 保存失败后的原因
    this.reason = reason
    // 判断失败回调是否存在，如果存在就调用
    // this.failCallback && this.failCallback(this.reason)
    while (this.failCallback.length) {
      this.failCallback.shift()()
    }
  }

  then(successCallback, failCallback) {
    successCallback = successCallback ? successCallback : value => value
    failCallback = failCallback ? failCallback : reason => { throw reason }
    // 实现链式调用
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 解决 resolvePromise(promise2, x, resolve, reject) 获取不到 promise2 的问题
        setTimeout(() => {
          try {
            let x = successCallback(this.value)
            // 判断 X 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是调用 reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason)
            // 判断 X 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是调用 reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value)
              // 判断 X 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是调用 reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason)
              // 判断 X 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是调用 reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
      }
    })

    return promise2
  }

  finally(callback) {
    return this.then(value => {
      // callback()
      // return value
      return MyPromise.resolve(callback()).then(() => value)
    }, reason => {
      // callback()
      // throw reason
      return MyPromise.resolve(callback()).then(() => { throw reason })
    })
  }

  catch(failCallback) {
    return this.then(undefined, failCallback)
  }

  static all(array) {
    let result = []
    let index = 0
    return new MyPromise((resolve, reject) => {
      function addData(key, value) {
        result[key] = value
        index++
        if (index === array.length) {
          resolve(result)
        }
      }

      for (let i = 0; i < array.length; i++) {
        let current = array[i]
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(value => addData(i, value), reason => reject(reason))
        } else {
          // 普通值
          addData(i, array[i])
        }
      }
    })
  }

  static resolve(value) {
    if (value instanceof MyPromise) {
      return value
    }
    return new MyPromise(resovle => resovle(value))
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // then 链式调用，promise 对象返回其自己（循环调用）
  if (promise2 === x) {
    return  reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if (x instanceof MyPromise) {
    // promise 对象
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化成如下代码
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x)
  }
}

// node 环境下导出
module.exports = MyPromise

标签：resolve,failCallback,value,reason,源码,Promise,reject,catch,promise
来源： https://www.cnblogs.com/dwyWeb/p/16416379.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。