从设计模式角度分析Promise:手撕Promise并不难

5,073 阅读12分钟


前言

Promise作为异步编程的一种解决方案,比传统的回调和事件更加强大,也是学习前端所必须要掌握的。作为一个有追求的前端,不仅要熟练掌握Promise的用法,而且要对其实现原理有一定的理解(说白了,就是面试装逼必备)。虽然网上有很多Promise的实现代码,几百行的,但个人觉得,不对异步编程和Promise有一定的理解,那些代码也就是一个板子而已(面试可不能敲板子)。首先默认读者都对Promise对象比较熟悉了,然后将从前端最常用的设计模式:发布-订阅和观察者模式的角度来一步一步的实现Promise。

从异步编程说起

既然Promise是一种异步解决方案,那么在没有Promise对象之前是怎么做异步处理的呢?有两种方法:回调函数和发布-订阅或观察者设计模式。(关于实现异步编程的更多方式请参考我的文章:JavaScript实现异步编程的5种方式

回调函数(callback function)

相信回调函数读者都不陌生,毕竟最早接触的也就是回调函数了,而且用回调函数做异步处理也很简单,以nodejs文件系统模块fs为例,读取一个文件一般都会这么做

fs.readFile("h.js", (err, data) => {
  console.log(data.toString())
});

其缺点也很明显,当异步流程变得复杂,那么回调也会变得很复杂,有时也叫做”回调地狱”,就以文件复制为例

fs.exists("h.js", exists => { // 文件是否存在
  if (exists) {
    fs.readFile("h.js", (err, data) => { // 读文件
      fs.mkdir(__dirname + "/js/", err => { // 创建目录
        fs.writeFile(__dirname + "/js/h.js", data, err => { // 写文件
          console.log("复制成功,再回调下去,代码真的很难看得懂")
        })
      });
    });
  }
});

其实代码还是能阅读的,感谢JS设计者没有把函数的花括号给去掉。像没有花括号的python写回调就是(就是个笑话。不是说python不好,毕竟JavaScript是世界上最好的语言)

# 这代码属实没法看啊
def callback_1():
      # processing ...
  def callback_2():
      # processing.....
      def callback_3():
          # processing ....
          def callback_4():
              #processing .....
              def callback_5():
                  # processing ......
              async_function1(callback_5)
          async_function2(callback_4)
      async_function3(callback_3)
  async_function4(callback_2)
async_function5(callback_1)

发布-订阅与观察者设计模式

第一次学设计模式还是在学Java和C++的时候,毕竟设计模式就是基于面向对象,让对象解耦而提出的。发布订阅设计模式和观察者模式很像,但是有点细微的区别(面试考点来了)

观察者模式 在软件设计中是一个对象,维护一个依赖列表,当任何状态发生改变自动通知它们。
发布-订阅模式是一种消息传递模式,消息的发布者(Publishers)一般将消息发布到特定消息中心,订阅者(Subscriber)可以按照自己的需求从消息中心订阅信息,跟消息队列挺类似的

在观察者模式只有两种组件:接收者和发布者,而发布-订阅模式中则有三种组件:发布者、消息中心和接收者。


在代码实现上的差异也比较明显

观察者设计模式

// 观察者设计模式
class Observer {
  constructor () {
    this.observerList = [];
  }

  subscribe (observer) {
    this.observerList.push(observer)
  }

  notifyAll (value) {
    this.observerList.forEach(observe => observe(value))
  }
}

发布-订阅设计模式(nodejs EventEmitter)

// 发布订阅
class EventEmitter {
  constructor () {
    this.eventChannel = {}; // 消息中心
  }

  // subscribe
  on (event, callback) {
    this.eventChannel[event] ? this.eventChannel[event].push(callback) : this.eventChannel[event] = [callback]
  }

  // publish
  emit (event, ...args) {
    this.eventChannel[event] && this.eventChannel[event].forEach(callback => callback(...args))
  }

  // remove event
  remove (event) {
    if (this.eventChannel[event]) {
      delete this.eventChannel[event]
    }
  }

  // once event
  once (event, callback) {
    this.on(event, (...args) => {
      callback(...args);
      this.remove(event)
    })
  }
}

从代码中也能看出他们的区别,观察者模式不对事件进行分类,当有事件时,将通知所有观察者。发布-订阅设计模式对事件进行了分类,触发不同的事件,将通知不同的观察者。所以可以认为后者就是前者的一个升级版,对通知事件做了更细粒度的划分。

发布-订阅和观察者在异步中的应用

// 观察者
const observer = new Observer();
observer.subscribe(value => {
  console.log("第一个观察者,接收到的值为:");
  console.log(value)
});
observer.subscribe(value => {
  console.log("第二个观察者,接收到的值为");
  console.log(value)
});
fs.readFile("h.js", (err, data) => {
  observer.notifyAll(data.toString())
});

// 发布-订阅
const event = new EventEmitter();
event.on("err", console.log);
event.on("data", data => {
  // do something
  console.log(data)
});
fs.readFile("h.js", (err, data) => {
  if (err) event.emit("err", err);
  event.emit("data", data.toString())
});

两种设计模式在异步编程中,都是通过注册全局观察者或全局事件,然后在异步环境里通知所有观察者或触发特定事件来实现异步编程。

劣势也很明显,比如全局观察者/事件过多难以维护,事件名命冲突等等,因此Promise便诞生了。

从观察者设计模式的角度分析和实现Promise

Promise在一定程度上继承了观察者和发布-订阅设计模式的思想,我们先从一段Promise代码开始,来分析Promise是如何使用观察者设计模式

const asyncReadFile = filename => new Promise((resolve) => {
  fs.readFile(filename, (err, data) => {
    resolve(data.toString()); // 发布者 相当于观察者模式的notifyAll(value) 或者发布订阅模式的emit
  });
});

asyncReadFile("h.js").then(value => { // 订阅者 相当于观察者模式的subscribe(value => console.log(value)) 或者发布订阅模式的on
  console.log(value);
});

从上面的Promise代码中,我觉得Promise方案优于前面的发布-订阅/观察者方案的原因就是:对异步任务的封装,事件发布者在回调函数里(resolve),事件接收者在对象方法里(then()),使用局部事件,对两者进行了更好的封装,而不是扔在全局中。

Promise实现

基于上面的思想,我们可以实现一个简单的Promise:MyPromise

class MyPromise {
  constructor (run) { // run 函数 (resolve) => any
    this.observerList = [];
    const notifyAll = value => this.observerList.forEach(callback => callback(value));
    run(notifyAll); // !!! 核心
  }

  subscribe (callback) {
    this.observerList.push(callback);
  }
}
// 
const p = new MyPromise(notifyAll => {
  fs.readFile("h.js", (err, data) => {
    notifyAll(data.toString()) // resolve
  })
});

p.subscribe(data => console.log(data)); // then

几行代码就实现了一个简单的Promise,而上面的代码也就是把观察者设计模式稍微改了改而已。

添加状态

当然还没结束,上面的MyPromise是有问题的。之前说了Promise是对异步任务的封装,可以看成最小异步单元(像回调一样),而异步结果也应该只有一个,即Promise中的resolve只能使用一次,相当于EventEmitter的once事件。而上面实现的MyPromise的notifyAll是可以用多次的(没有为什么),因此这就可以产生异步任务的结果可以不止一个的错误。因此解决方法就是加一个bool变量或者添加状态即pending态和fulfilled态(本质上和一个bool变量是一样的),当notifyAll调用一次后立马锁住notifyAll或者当pending态变为fulfilled态后再次调用notifyAll函数将不起作用。

为了和Promise对象一致,这里使用添加状态的方式(顺便把方法名给改了一下, notifyAll => resolve, subscribe => then)。

const pending = "pending";
const fulfilled = "fulfilled";

class MyPromise {
  constructor (run) { // run 函数 (resolve) => any
    this.observerList = [];
    this.status = pending;
    const resolve = value => {
      if (this.status === pending) {
        this.status = fulfilled;
        this.observerList.forEach(callback => callback(value));
      }
    };
    run(resolve); // !!! 核心
  }

  then (callback) {
    this.observerList.push(callback);
  }
}

const p = new MyPromise(resolve => {
  setTimeout(() => {
    resolve("hello world");
    resolve("hello world2"); // 不好使了
  }, 1000);
});

p.then(value => console.log(value));

实现链式调用

貌似开始有点轮廓了,不过现在的MyPromise中的then可没有链式调用,接下来我们来实现then链,需要注意的在Promise中then方法返回的是一个新的Promise实例不是之前的Promise。由于then方法一直返回新的MyPromise对象,所以需要一个属性来保存唯一的异步结果。另一方面,在实现then方法依然是注册回调,但实现时需要考虑当前的状态,如果是pending态,我们需要在返回新的MyPromise的同时,将回调注册到队列中,如果是fulfilled态,那直接返回新的MyPromise对象,并将上一个MyPromise对象的结果给新的MyPromise对象。

const pending = "pending";
const fulfilled = "fulfilled";

class MyPromise {
  constructor (run) { // run 函数 (resolve) => any
    this.resolvedCallback = [];
    this.status = pending;
    this.data = void 666; // 保存异步结果
    const resolve = value => {
      if (this.status === pending) {
        this.status = fulfilled;
        this.data = value; // 存一下结果
        this.resolvedCallback.forEach(callback => callback(this.data));
      }
    };
    run(resolve); // !!! 核心
  }

  then (onResolved) {
    // 这里需要对onResolved做一下处理,当onResolved不是函数时将它变成函数
    onResolved = typeof onResolved === "function" ? onResolved : value => value;
    switch (this.status) {
      case pending: {
        return new MyPromise(resolve => {
          this.resolvedCallback.push(value => { // 再包装
            const result = onResolved(value); // 需要判断一下then接的回调返回的是不是一个MyPromise对象
            if (result instanceof MyPromise) {
              result.then(resolve) // 如果是,直接使用result.then后的结果,毕竟Promise里面就需要这么做
            } else {
              resolve(result); // 感受一下闭包的伟大
            }
          })
        })
      }
      case fulfilled: {
        return new MyPromise(resolve => {
          const result = onResolved(this.data); // fulfilled态,this.data一定存在,其实这里就像map过程
          if (result instanceof MyPromise) {
            result.then(resolve)
          } else {
            resolve(result); // 闭包真伟大
          }
        })
      }
    }
  }
}

const p = new MyPromise(resolve => {
  setTimeout(() => {
    resolve("hello world");
    resolve("hello world2"); // 不好使了
  }, 1000);
});

p.then(value => value + "dpf")
 .then(value => value.toUpperCase())
 .then(console.log);

以上代码需要重点理解,毕竟理解了上面的代码,下面的就很容易了

错误处理

只有resolve和then的MyPromise对象已经完成。没有测试的库就是耍流氓,没有差错处理的代码也是耍流氓,所以错误处理还是很重要的。由于一个异步任务可能完不成或者中间会出错,这种情况必须得处理。因此我们需要加一个状态rejected来表示异步任务出错,并且使用rejectedCallback队列来存储reject发送的错误事件。(前方高能预警,面向try/catch编程开始了)

const pending = "pending";
const fulfilled = "fulfilled";
const rejected = "rejected"; // 添加状态 rejected

class MyPromise {
  constructor (run) { // run 函数 (resolve, reject) => any
    this.resolvedCallback = [];
    this.rejectedCallback = []; // 添加一个处理错误的队列
    this.status = pending;
    this.data = void 666; // 保存异步结果
    const resolve = value => {
      if (this.status === pending) {
        this.status = fulfilled;
        this.data = value;
        this.resolvedCallback.forEach(callback => callback(this.data));
      }
    };
    const reject = err => {
      if (this.status === pending) {
        this.status = rejected;
        this.data = err;
        this.rejectedCallback.forEach(callback => callback(this.data));
      }
    };
    try { // 对构造器里传入的函数进行try / catch
      run(resolve, reject); // !!! 核心
    } catch (e) {
      reject(e)
    }
  }

  then (onResolved, onRejected) { // 添加两个监听函数
    // 这里需要对onResolved做一下处理,当onResolved不是函数时将它变成函数
    onResolved = typeof onResolved === "function" ? onResolved : value => value;
    onRejected = typeof onRejected === "function" ? onRejected : err => { throw err };

    switch (this.status) {
      case pending: {
        return new MyPromise((resolve, reject) => {
          this.resolvedCallback.push(value => {
            try { // 对整个onResolved进行try / catch
              const result = onResolved(value);
              if (result instanceof MyPromise) { 
                result.then(resolve, reject)
              } else {
                resolve(result); 
              }
            } catch (e) {
              reject(e) // 捕获异常,将异常发布
            }
          });
          this.rejectedCallback.push(err => {
            try { // 对整个onRejected进行try / catch
              const result = onRejected(err);
              if (result instanceof MyPromise) {
                result.then(resolve, reject)
              } else {
                reject(err)
              }
            } catch (e) {
              reject(err) // 捕获异常,将异常发布
            }
          })
        })
      }
      case fulfilled: {
        return new MyPromise((resolve, reject) => {
          try { // 对整个过程进行try / catch
            const result = onResolved(this.data);
            if (result instanceof MyPromise) {
              result.then(resolve, reject)
            } else {
              resolve(result);  
            }
          } catch (e) {
            reject(e) // 捕获异常,将异常发布
          }
        })
      }
      case rejected: {
        return new MyPromise((resolve, reject) => {
          try { // 对整个过程进行try / catch
            const result = onRejected(this.data);
            if (result instanceof MyPromise) {
              result.then(resolve, reject)
            } else {
              reject(result) 
            }
          } catch (e) {
            reject(e) // 捕获异常,将异常发布
          }
        })
      }
    }
  }
}

const p = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("error"));
    resolve("hello world");  // 不好使了
    resolve("hello world2"); // 不好使了
  }, 1000);
});

p.then(value => value + "dpf")
 .then(console.log)
 .then(() => {}, err => console.log(err));

可以看出then方法的实现比较复杂,但这是一个核心的方法,实现了这个后面的其他方法就很好实现了,下面给出MyPromise的每一个方法的实现。

catch实现

这个实现非常简单

catch (onRejected) {
    return this.then(void 666, onRejected)
}

静态方法MyPromise.resolve

static resolve(p) {
     if (p instanceof MyPromise) {
       return p.then()
     } 
     return new MyPromise((resolve, reject) => {
       resolve(p)
     })
 }

静态方法MyPromise.reject

static reject(p) {
    if (p instanceof MyPromise) {
      return p.catch()
    } 
    return new MyPromise((resolve, reject) => {
      reject(p)
    })
}
 

静态方法MyPromise.all

static all (promises) {
    return new MyPromise((resolve, reject) => {
      try {
        let count = 0,
            len   = promises.length,
            value = [];
        for (let promise of promises) {
          MyPromise.resolve(promise).then(v => {
            count ++;
            value.push(v);
            if (count === len) {
              resolve(value)
            }
          })
        }
      } catch (e) {
        reject(e)
      }
    });
  }

静态方法MyPromise.race

static race(promises) {
    return new MyPromise((resolve, reject) => {
      try {
        for (let promise of promises) {
          MyPromise.resolve(promise).then(resolve)
        }
      } catch (e) {
        reject(e)
      }
    }) 
  }

完整的MyPromise代码实现

const pending = "pending";
const fulfilled = "fulfilled";
const rejected = "rejected"; // 添加状态 rejected

class MyPromise {
  constructor (run) { // run 函数 (resolve, reject) => any
    this.resolvedCallback = [];
    this.rejectedCallback = []; // 添加一个处理错误的队列
    this.status = pending;
    this.data = void 666; // 保存异步结果
    const resolve = value => {
      if (this.status === pending) {
        this.status = fulfilled;
        this.data = value;
        this.resolvedCallback.forEach(callback => callback(this.data));
      }
    };
    const reject = err => {
      if (this.status === pending) {
        this.status = rejected;
        this.data = err;
        this.rejectedCallback.forEach(callback => callback(this.data));
      }
    };
    try { // 对构造器里传入的函数进行try / catch
      run(resolve, reject); // !!! 核心
    } catch (e) {
      reject(e)
    }
  }

  static resolve (p) {
    if (p instanceof MyPromise) {
      return p.then()
    }
    return new MyPromise((resolve, reject) => {
      resolve(p)
    })
  }

  static reject (p) {
    if (p instanceof MyPromise) {
      return p.catch()
    }
    return new MyPromise((resolve, reject) => {
      reject(p)
    })
  }

  static all (promises) {
    return new MyPromise((resolve, reject) => {
      try {
        let count = 0,
            len   = promises.length,
            value = [];
        for (let promise of promises) {
          MyPromise.resolve(promise).then(v => {
            count ++;
            value.push(v);
            if (count === len) {
              resolve(value)
            }
          })
        }
      } catch (e) {
        reject(e)
      }
    });
  }

  static race(promises) {
    return new MyPromise((resolve, reject) => {
      try {
        for (let promise of promises) {
          MyPromise.resolve(promise).then(resolve)
        }
      } catch (e) {
        reject(e)
      }
    })
  }

  catch (onRejected) {
    return this.then(void 666, onRejected)
  }

  then (onResolved, onRejected) { // 添加两个监听函数
    // 这里需要对onResolved做一下处理,当onResolved不是函数时将它变成函数
    onResolved = typeof onResolved === "function" ? onResolved : value => value;
    onRejected = typeof onRejected === "function" ? onRejected : err => { throw err };

    switch (this.status) {
      case pending: {
        return new MyPromise((resolve, reject) => {
          this.resolvedCallback.push(value => {
            try { // 对整个onResolved进行try / catch
              const result = onResolved(value);
              if (result instanceof MyPromise) { 
                result.then(resolve, reject)
              } else {
                resolve(result); 
              }
            } catch (e) {
              reject(e)
            }
          });
          this.rejectedCallback.push(err => {
            try { // 对整个onRejected进行try / catch
              const result = onRejected(err);
              if (result instanceof MyPromise) {
                result.then(resolve, reject)
              } else {
                reject(err)
              }
            } catch (e) {
              reject(err)
            }
          })
        })
      }
      case fulfilled: {
        return new MyPromise((resolve, reject) => {
          try { // 对整个过程进行try / catch
            const result = onResolved(this.data);
            if (result instanceof MyPromise) {
              result.then(resolve, reject)
            } else {
              resolve(result);  // emit
            }
          } catch (e) {
            reject(e)
          }
        })
      }
      case rejected: {
        return new MyPromise((resolve, reject) => {
          try { // 对整个过程进行try / catch
            const result = onRejected(this.data);
            if (result instanceof MyPromise) {
              result.then(resolve, reject)
            } else {
              reject(result)
            }
          } catch (e) {
            reject(e)
          }
        })
      }
    }
  }
}

总结

本文想要从发布-订阅和观察者模式分析Promise的实现,先从异步编程的演变说起,回调函数到发布-订阅和观察者设计模式,然后发现Promise和观察者设计模式比较类似,所以先从这个角度分析了Promise的实现,当然Promise的功能远不如此,所以本文分析了Promise的常用方法的实现原理。Promise的出现改变了传统的异步编程方式,使JavaScript在进行异步编程时更加灵活,代码更加可维护、可阅读。所以作为一个有追求的前端,必须要对Promise的实现有一定的理解。