【设计模式】当发布订阅遇上Promise

2021-04-01

Write Less & Do More

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。

简单点就是收集依赖 => 触发通知 => 取出依赖执行

而 Promise 是 JS 异步编程中的重要概念，异步抽象处理对象，是目前比较流行 Javascript 异步编程解决方案之一，示例如下

1
2
3

new Promise((resolve, reject) => {
  resolve('fulfilled')
}).then(console.log) // => 'fulfilled'

拆分如下：订阅者（then）把订阅的事件 (console.log) 注册到调度中心（Promise），当发布者（resolve, reject）发布该事件到调度中心，该事件触发时由调度中心统一调度订阅者注册到调度中心的处理代码, 输出 ‘fulfilled’。

简单实现

Promise构造函数用来声明示例对象，需要传入一个执行器函数。其中包括 resolve 函数和 reject 函数，以及几个重要的属性：状态属性、结果属性和回调函数队列。

function _Promise(executor) {
  const context = this

  // 初始化
  this.state = 'pending'
  this.result = null
  this.callBacks = []

  function resolve(value) { }
  function reject(reason) { }

  // 同步调用执行函数
  try {
    executor(resolve, reject)
  } catch (error) {
    reject(error)
  }
}

resolve 函数用于异步处理成功后调用的函数。其中包括验证对象状态修改次数，修改 promise 实例对象状态，异步调用成功的回调函数 onResolved，reject 同理

function resolve(value) {
  if (context.state !== 'pending') return;
  
  context.state = 'fulfilled'
  context.result = value

  // 异步执行，且在 then 方法被调用的第一轮事件循环之后的新执行栈中执行。
  setTimeout(() => {
    // 发布消息
    context.callBacks.forEach(element => {
      element.onResolved(value)
    })
  })
}

function reject(reason) {
  if (context.state !== 'pending') return;

  context.state = 'rejected'
  context.result = reason

  setTimeout(() => {
    context.callBacks.forEach(element => {
      element.onRejected(reason)
    })
  })
}

then 原型函数用于为 promise 指定成功/失败的回调函数，返回值是一个新的 promise 对象。

_Promise.prototype.then = function (onResolved, onRejected) {
  // 抛出异常通过 reject 句柄接受
  if (typeof onResolved !== 'function') {
    onResolved = reason => { throw reason }
  }

  if (typeof onResolved !== 'function') {
    onRejected = val => val 
  }

  // 根据结果进行链式调用 .then().then().catch()
  function handle(callback) {
    try {
      let result = callback(context.result)

      if (result instanceof myPromise) {
        result.then(resolve, reject)
      } else {
        resolve(result)
      }
    } catch (error) {
      reject(error)
    }
  }

  return new _Promise((resolve, reject) => {
    if (this.state === 'pending') {
      // 注册订阅者
      this.callBacks.push({
        onResolved (val) { handle(onResolved) },
        onRejected (reason) { handle(onRejected) }
      })
    }

    if (this.state === 'fulfilled') {
      setTimeout(() => handle(onResolved) );
    }

    if (this.state === 'rejected') {
      setTimeout(() => handle(onRejected) );
    }
  })
}

_Promise.prototype.catch = function (onRejected) {
  return this.then(null, onRejected)
}

定义 _Promise 静态方法 resolve，reject

_Promise.resolve = function (value) {
  return new _Promise((resolve, reject) => {
    if (value instanceof myPromise) {
      value.then(resolve, reject)
    } else {
      resolve(value)
    }
  })
}

_Promise.reject = function (reason) {
  return new _Promise((resolve, reject) => {
    reject(reason)
  })
}

调用栈（Call stack）

回顾到最开始的示例代码，那么 __Promise 的执行顺序应该是

constructor => resolve => then => constructor => handle

链式执行顺序 then => constructor => handle => …

Promise

AsnLi

【设计模式】当发布订阅遇上Promise

简单实现

调用栈（Call stack）

参考资料