一步步撸Promise.then

一、首先，new Promise(fn)新建Promise实例时，会传一个函数fn，Pomise.then(callback) 会接收一个函数callback

function Promise (fn) {}
Promise.properties.then = function (callback) {}

二、

new Promise(function (resolve) { resolve('data') })

可见fn的第一个参数resolve是一个函数，并且resolve的第一个参数会是then函数的传参

function Promise (fn) {
    const resolve = function (data) {
        this.data = data    
    }
    fn(resolve)
}
Promise.properties.then = function (callback) {
    callback(this.data)
}

三、上面已经实现单次的then功能，由于可以不停的then，所以改造一下

function Promise (fn) {
    const resolve = function (data) {
        this.data = data
    }}
Promise.properties.then = function (callback) {
    callback(this.data)
    const fn = function (resovle) {
        resovle(this.data)
    }
    return new Promise(fn)
}

相信到这里已经差不多明确了

四、但是又发现Promise.then不是异步执行的

function Promise (fn) {
  this.cbs = []
  const resovle = (data) => {
    setTimeout(() => {
      this.data = data
      this.cbs.forEach(cb => {
        cb(this.data)
      })
    })
  }
  fn(resovle)
}
Promise.prototype.then = function (callback) {
  return new Promise(resolve => {
    this.cbs.push(() => {
      const res = callback(this.data)
      resolve(res)
    })
  })
}