最简单的手写Promise，30行代码理解Promise核心原理和发布订阅模式

class EventCenter {
  constructor() {
    this.events = {}
  }
  subscribe(eventName, callback) {
    if (!this.events[eventName]) this.events[eventName] = []
    this.events[eventName].push(callback)
  }
  publish(eventName, ...args) {
    const events = this.events[eventName] || []
    if (events.length) {
      events.map(m => m(...args))
    }
  }
}

const instance = new EventCenter()
instance.subscribe('eat', (value) => {
  console.log('小明今天吃：' + value)
})
instance.subscribe('eat', (value) => {
  console.log('小翠今天吃：' + value)
})

instance.publish('eat', '沙糖桔')

class Person {
  constructor(executor) {
    this.gender = '男'
    // 直接执行构造器传进来的方法，再把内部修改性别的方法作为参数传出去给构造实例时调用
    executor(this.setGender)
  }

  // 注意这里用箭头函数，否则外部调用时 this 丢失会报错，用普通函数要自己 bind 一下 this
  setGender = (e) => {
    this.gender = e
    console.log('此人的性别是：' + this.gender)
  }
}

const instance = new Person((func) => {
  console.log('我要开始造人了')
  func('太监')
})

class CustomPromise {
  constructor(executor) {
    this.status = 'pending' // 状态：pending、fulfilled、rejected
    this.value = null // 外部修改状态调用 resolve、reject 时传进来的参数
    this.events = [] // 实例调用 then 方法收集的事件队列，then 可以多次调用，所以要用数组来存，用一个单独的变量来存就只会调用最后的一次

    executor(this.resolve)
  }

  resolve = (value) => {
    if (this.status === 'pending') {
      this.status = 'fulfilled'
      this.events.forEach(event => {
        event(value)
      })
    }
  }

  then = (callback) => {
    // 状态还没变的时候就要先把事件收集起来，如果变了就直接执行。
    // 实例化对象时肯定会先运行类的构造函数，如果里面都是同步代码，调用实例的 then 方法时状态已经改变了，所以直接运行就行了，如果是异步代码状态还未改变那就要先把事件收集起来
    if (this.status === 'pending') {
      this.events.push(callback)
    }
    if (this.status === 'fulfilled') {
      callback(this.value)
    }
  }
}


const son = new CustomPromise((resolve) => {
  setTimeout(() => {
    const msg = '爸爸，我5秒之后运行成功了哟'
    console.log(msg)
    resolve(msg)
  }, 5000)
})

son.then(res => {
  console.log('儿子，收到了你的来信："' + res + '"')
})

class CustomPromise {
  constructor(executor) {
    this.status = 'pending'
    this.value = null
    this.events = []
    executor(this.resolve)
  }
  resolve = (value) => {
    if (this.status === 'pending') {
      this.status = 'fulfilled'
      this.value = value
      this.events.forEach(event => {
        event(value)
      })
    }
  }
  then = (callback) => {
    return new CustomPromise((resolve) => {
      if (this.status === 'pending') {
        this.events.push(() => {
          resolve(callback(this.value))
        })
      }
      if (this.status === 'fulfilled') {
        resolve(callback(this.value))
      }
    })
  }
}


const son = new CustomPromise((resolve) => {
  setTimeout(() => {
    const msg = '爸爸，我5秒之后运行成功了哟'
    console.log(msg)
    resolve(msg)
  }, 5000)
})

son.then(res => {
  const msg = '儿子，收到了你的来信："' + res + '"'
  console.log(msg)
  return 'then 的链式调用'
}).then(res => {
  console.log(res)
})

son.then(res => {
  const msg = '第2次调用 then："' + res + '"'
  console.log(msg)
})