关于javascript:手写一个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)
  }
}