手撕promise底层实现

直接上代码：

雏形

3个状态，只可在pending才可修改，

class myPromise {
  constructor(executor) {//executor为传入的函数(resolve,reject)=>{}
    this.state = myPromise.PENDING
    this.value = null
    this.reason = null

    const resolve = value => {
      // 只有在PENDING的时候才能修改状态
      if (this.state === myPromise.PENDING) {
        this.state = myPromise.FULFILLED
        this.value = value
      }
    }
    const reject = reason => {
      // 只有在PENDING的时候才能修改状态
      if (this.state === myPromise.PENDING) {
        this.state = myPromise.REJECTED
        this.reason = reason
      }
    }
    executor(resolve, reject)
  }
}
myPromise.PENDING = 'pending'
myPromise.FULDILLED = 'fulfilled'
myPromise.REJECTED = 'rejected'

then的雏形（同步修改状态的回调以及值传递）

class myPromise {
  constructor(executor) {
    this.state = myPromise.PENDING
    this.value = null
    this.reason = null

    const resolve = value => {
      // 只有在PENDING的时候才能修改状态
      if (this.state === myPromise.PENDING) {
        this.state = myPromise.FULFILLED
        this.value = value
      }
    }
    const reject = reason => {
      // 只有在PENDING的时候才能修改状态
      if (this.state === myPromise.PENDING) {
        this.state = myPromise.REJECTED
        this.reason = reason
      }
    }
    executor(resolve, reject)
  }
  then(onFulfilled, onRejected) {
    // 为值穿透做准备
    if (typeof onFulfilled !== 'function') onFulfilled = a => a
    if (typeof onRejected !== 'function') {
      onRejected = e => {
        throw e
      }
    }
		// 同步修改状态，
    if(this.state === myPromise.FULDILLED){
      onFulfilled(this.value)
    }else if(this.state === myPromise.REJECTED){
      onRejected(this.value)
    }
  }
}
myPromise.PENDING = 'pending'
myPromise.FULDILLED = 'fulfilled'
myPromise.REJECTED = 'rejected'

then的完善（异步修改状态的回调以及微任务执行同步回调）

class myPromise {
  constructor(executor) {
    this.state = myPromise.PENDING
    this.value = null
    this.reason = null
    this.onFulfilledFns = [] //异步任务队列，当resolve时执行
    this.onRejectedFns = []
    const resolve = value => {
      if (this.state === myPromise.PENDING) {
        this.state = myPromise.FULFILLED
        this.value = value
        // 执行异步回调
        this.onFulfilledFns.forEach(fn => fn())
      }
    }
    const reject = reason => {
      if (this.state === myPromise.PENDING) {
        this.state = myPromise.REJECTED
        this.reason = reason
        // 执行异步回调
        this.onRejectedFns.forEach(fn => fn())
      }
    }
    executor(resolve, reject)
  }
  then(onFulfilled, onRejected) {
    if (typeof onFulfilled !== 'function') onFulfilled = a => a
    if (typeof onRejected !== 'function') {
      onRejected = e => {
        throw e
      }
    }

    if (this.state === myPromise.FULDILLED) {
      //微任务队列里面添加一个任务
      queueMicrotask(() => onFulfilled(this.value))
    } else if (this.state === myPromise.REJECTED) {
      //微任务队列里面添加一个任务
      queueMicrotask(() => onRejected(this.reason))
    } else {
			// 如果是异步修改状态，那么
      this.onFulfilledFns.push(() =>
        queueMicrotask(() => onFulfilled(this.value))
      )
      this.onRejectedFns.push(() =>
        queueMicrotask(() => onRejected(this.reason))
      )
    }
  }
}
myPromise.PENDING = 'pending'
myPromise.FULDILLED = 'fulfilled'
myPromise.REJECTED = 'rejected'

链式调用(then返回的Promise状态由回调的返回值决定）

class myPromise {
  constructor(executor) {
    this.state = myPromise.PENDING
    this.value = null
    this.reason = null
    this.onFulfilledFns = []
    this.onRejectedFns = []
    const resolve = value => {
      if (this.state === myPromise.PENDING) {
        this.state = myPromise.FULFILLED
        this.value = value
        this.onFulfilledFns.forEach(fn => typeof fn === 'function' && fn())
      }
    }
    const reject = reason => {
      if (this.state === myPromise.PENDING) {
        this.state = myPromise.REJECTED
        this.reason = reason
        this.onRejectedFns.forEach(fn => fn())
      }
    }
    executor(resolve, reject)
  }
  then(onFulfilled, onRejected) {
    if (typeof onFulfilled !== 'function') onFulfilled = a => a
    if (typeof onRejected !== 'function') {
      onRejected = e => {
        throw e
      }
    }
    return new myPromise((resolve, reject) => {
      if (this.state === myPromise.FULFILLED) {
        // 封装execute
        queueMicrotask(() => {
          execute(onFulfilled, this.value, resolve, reject)
        })
      } else if (this.state === myPromise.REJECTED) {
        // 封装execute
        queueMicrotask(() => execute(onRejected, this.reason, resolve, reject))
      } else {
        this.onFulfilledFns.push(() =>
          queueMicrotask(() =>
            // 封装execute
            execute(onFulfilled, this.value, resolve, reject)
          )
        )
        this.onRejectedFns.push(() =>
          queueMicrotask(() =>
            // 封装execute
            execute(onRejected, this.reason, resolve, reject)
          )
        )
      }
    })
  }
}
function execute(cb, value, resolve, reject) {
  try {
    // 判断onFulfilled,onRejected返回值是否是Promise对象
    const res = cb(value)
    if (res instanceof myPromise) {
      //如果是，那么新的Promise对象的状态就等于原来的Promise对象的状态
      res.then(resolve, reject)
    } else {
      // 否则就是成功的状态
      resolve(res)
    }
  } catch (e) {
    reject(e)
  }
}
myPromise.PENDING = 'pending'
myPromise.FULFILLED = 'fulfilled'
myPromise.REJECTED = 'rejected'