手写一个promise的过程

promise 的实现原理

• promise的三种状态

1. pending
2. fulfilled
3. rejected

class Promise {
  constructor(executor) {
    // Promise接一个方法  （resolve，reject）=>{}
    // 开始的状态
    this.state = 'pending'
    // 成功的状态
    this.value = undefined
    // 失败的状态
    this.result = undefined
    // 状态执行的时候，要立即改变，且不可逆转
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled'
        this.value = value
      }
    }
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.result = reason
      }
    }
    executor(resolve, reject) //这个方法要立即执行
  }
  // then接受两个参数，都是方法
  then(onFulfilled, onRejected) {
    // 如果这样写是同步的，this.state一直是padding的状态
    console.log(this.state)
    // 如果成功，传入成功的参数
    if (this.state === 'fulfilled') {
      onFulfilled(this.value)
    }
    // 如果失败，传入失败的参数
    if (this.state === 'rejected') {
      onRejected(this.result)
    }
  }

}

• 上面是同步的，执行then方法后，this.state一直是pending的状态

发布订阅者模式

module.exports = class Promise {
  constructor(executor) {
    // Promise接一个方法  （resolve，reject）=>{}
    // 开始的状态
    this.state = 'pending'
    // 成功的状态
    this.value = undefined
    // 失败的状态
    this.result = undefined
    // 成功的订阅者数组
    this.onResolvedCallbacks = []
    // 失败的订阅者数组
    this.onRejectedCallbacks = []
    // 状态执行的时候，要立即改变，且不可逆转
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled'
        this.value = value
        // 执行resolve的时候，把 this.onResolvedCallbacks里面的方法全部执行一遍
        this.onResolvedCallbacks.forEach(fn => fn())
      }
    }
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.result = reason
        // 执行reject的时候，把 this.onRejectedCallbacks里面的方法全部执行一遍
        this.onRejectedCallbacks.forEach(fn => fn())
      }
    }
    executor(resolve, reject) //这个方法要立即执行
  }
  // then接受两个参数，都是方法
  then(onFulfilled, onRejected) {
    // 如果这样写是同步的，this.state一直是padding的状态
    // 如果成功，传入成功的参数
    if (this.state === 'fulfilled') {
      onFulfilled(this.value)
    }
    // 如果失败，传入失败的参数
    if (this.state === 'rejected') {
      onRejected(this.result)
    }

    // 发布订阅者模式
    // 如果状态是   pending
    // 就把要做的方法传入 待发布状态中去
    if (this.state === 'padding') {
      this.onResolvedCallbacks.push(() => {
        onFulfilled(this.value)
      })
      this.onRejectedCallbacks.push(() => {
        onRejected(this.result)
      })
    }
  }

}

• 但是上面没有链式调用。then()方法后面不能接then（）

解决then（）方法不返回promise的问题

class Promise {
  constructor(executor) {
    // Promise接一个方法  （resolve，reject）=>{}
    // 开始的状态
    this.state = 'pending'
    // 成功的状态
    this.value = undefined
    // 失败的状态
    this.result = undefined
    // 成功的订阅者数组
    this.onResolvedCallbacks = []
    // 失败的订阅者数组
    this.onRejectedCallbacks = []
    // 状态执行的时候，要立即改变，且不可逆转
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled'
        this.value = value
        // 执行resolve的时候，把 this.onResolvedCallbacks里面的方法全部执行一遍
        this.onResolvedCallbacks.forEach(fn => fn())
      }
    }
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.result = reason
        // 执行reject的时候，把 this.onRejectedCallbacks里面的方法全部执行一遍
        this.onRejectedCallbacks.forEach(fn => fn())
      }
    }
    executor(resolve, reject) //这个方法要立即执行
  }
  // then接受两个参数，都是方法
  then(onFulfilled, onRejected) {
    // 如果这样写是同步的，this.state一直是padding的状态
    // 如果成功，传入成功的参数
    const promise2 = new Promise((resolve, reject) => {
      // 解决不能链式调用的问题。需要再返回一个promise
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          const x = onFulfilled(this.value)
          resolvePromise(promise2, x, resolve, reject)
        }, 0)

      }
      // 如果失败，传入失败的参数
      if (this.state === 'rejected') {
        setTimeout(() => {
          const x = onRejected(this.result)
          resolvePromise(promise2, x, resolve, reject)
        }, 0)
      }

      // 发布订阅者模式
      // 如果状态是   padding
      // 就把要做的方法传入 待发布状态中去
      if (this.state === 'padding') {
        this.onResolvedCallbacks.push(() => {

          setTimeout(() => {
            const x = onFulfilled(this.value)
            resolvePromise(promise2, x, resolve, reject)
          }, 0)
        })
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            const x = onRejected(this.result)
            resolvePromise(promise2, x, resolve, reject)
          }, 0)
        })
      }
    })
    return promise2
  }
}

// 定义resolvePromise 方法
const resolvePromise = (promise2, x, resolve, reject) => {
  // console.log(promise2, x, resolve, reject)
  if (promise2 === x) {
    console.log(11111)
    return reject(new TypeError('循环引用！'))
  }
  // 判断 x 的类型
  if (typeof x === 'function' || (typeof x === 'object' && x !== null)) {
    // 复杂类型
    try {
      const then = x.then
      if (typeof then === 'function') {
        // 认为这个确实是一个promise
        then.call(x, y => {
          // 只能解决一次，如果resolve里面嵌套n个promise
          // resolve(y)
          // 递归解析当前的x
          resolvePromise(promise2, y, resolve, reject)
        }, r => {
          reject(r)
        })
      }
    } catch (error) {
      reject(error)
    }
  } else {
    // 基本类型
    resolve(x)
  }
}