手写 Promise 源码之在 Promise 类中加入异步逻辑

目录

• 手写 Promise 源码之在 Promise 类中加入异步逻辑
  • 测试代码
  • 代码实现

手写 Promise 源码之在 Promise 类中加入异步逻辑

测试代码

在执行器中加入异步代码，由于异步代码要在主线程的代码完毕后才会执行，所以第18号代码 then() 会马上执行，此时在 promise 的状态为 pending，那么需要在 then 方法中增加对等待状态相关的处理代码。

const MyPromise = require('./myPromise.js')

let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
     resolve('成功')
  }, 2000)
})

promise.then(value => {
  console.log(value)
}, reason => {
  console.log(reason)
})

代码实现

successCallback failCallback

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

class MyPromise {
  constructor(exectuor) {
    exectuor(this.resolve, this.reject)
  }

  // promise 状态
  status = PENDING

  // 成功之后的值
  value = undefined

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

  // 成功回调
  successCallback = undefined

  // 失败回调
  failCallback = undefined

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

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

  then(successCallback, failCallback) {
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 将成功回调和失败回调存储起来
      this.successCallback = successCallback
      this.failCallback = failCallback
    }
  }
}

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