手撸一个 Koa

const MyKoa = require('./application');
const app = new MyKoa();
async function f1(ctx, next) {
  console.log('f1');
  await next();
async function f2(ctx, next) {
  console.log('f2');
  await next();
async function f3(ctx, next) {
  console.log('f3');
  throw new Error('抛出一个 TEST！错误');
app.use(f1);
app.use(f2);
app.use(f3);
app.listen(3000, () => {
  console.log('[example] listening on port 3000');

├── README.md
├── package.json
└── lib
    ├── application.js // 入口文件
    ├── context.js
    ├── request.js
    └── response.js

const http = require('http');
const context = require('./context');
const request = require('./request');
const response = require('./response');
class Application {
  constructor () {
    this.context = context;
    this.request = request;
    this.response = response;
    this.callbackFunc;
   * 开启http server并传入callback
  listen(...args) {
    const server = http.createServer(this.callback());
    server.listen(...args);
   * 获取http server所需的callback函数
   * @return {Function} fn
  callback() {
    return  (req, res) => {
      // req, res 分别为 node 的原生 request，response 对象
      console.log('[Application] callback in listen');
      const ctx = this.createContext(req, res);
      function respond() {
        // ctx.res.end(ctx.body);
        const content = ctx.body;
        if (typeof content === 'string') {
          ctx.res.end(content);
        } else if (typeof content === 'object') {
          ctx.res.end(JSON.stringify(content));
      this.callbackFunc(ctx).then(respond);
   * 构造 context:
   * 将 koa request/response 对象挂载在 ctx 上，并返回
  createContext(req, res) {
    console.log('[Application] createContext');
    const ctx = Object.create(this.context);
    ctx.request = Object.create(this.request);
    ctx.response = Object.create(this.response);
    ctx.req = ctx.request.req = req;
    ctx.res = ctx.response.res = res;
    return ctx;
   * 挂载回调函数
   * @param {Function} fn 回调处理函数
    use (fn) {
    console.log('[Application] use: 注册中间件 fn')
        this.callbackFunc = fn
module.exports = Application;

 module.exports = {
  get query() {
    return this.request.query;
  get body() {
    console.log('[context.js] getting  body.')
    return this.response.body;
  set body(data) {
    console.log('[context.js] setting body.')
    this.response.body = data;
  get status() {
    return this.response.status;
  set status(statusCode) {
    this.response.body = data;

let proto = {};
// 为 proto 名为 property 的属性设置getter
function delegateGet(property, name) {
  proto.__defineGetter__(name, function () {
    console.log('[context.js] delegateGet: ' + property + '.'+ name)
      return this[property][name];
// 为proto名为property的属性设置setter
function delegateSet(property, name) {
  proto.__defineSetter__(name, function (val) {
    console.log('[context.js] delegateSet: ' + property + '.'+ name + ' 为 '+val)
    this[property][name] = val;
// 代理的 setter/getter
// request
delegateGet('request', 'query');
// response
delegateGet('response', 'body');
delegateSet('response', 'body');
delegateGet('response', 'status');
delegateSet('response', 'status');
module.exports = proto;

const url = require('url');
module.exports = {
  get query() {
    console.log('[request.js] getter query')
    return url.parse(this.req.url,true).query;

module.exports = {
  get body() {
    console.log('[response.js] getter body')
      return this._body;
  set body(data) {
    console.log('[response.js] setter body: '+ data)
    this._body = data;
  get status() {
    return this.res.statusCode;
  set status(data) {
    if(typeof data !== 'number') {
      throw Error('status must be a number!'
    this.res.statusCode = data

const  http = require('http');
const context = require('./context');
const request = require('./request');
const response = require('./response');
const compose = require('./compose');
class Application {
  constructor () {
    this.context = context;
    this.request = request;
    this.response = response;
    // this.callbackFunc;
    this.middleware = [];
   * 开启http server并传入callback
  listen(...args) {
    const server = http.createServer(this.callback());
    server.listen(...args);
   * 获取http server所需的callback函数
   * @return {Function} fn
  callback() {
    return  (req, res) => {
      // req, res 分别为 node 的原生 request，response 对象
      console.log('[Application] callback in listen');
      const ctx = this.createContext(req, res);
      function respond() {
        // ctx.res.end(ctx.body);
        const content = ctx.body;
        if (typeof content === 'string') {
          ctx.res.end(content);
        } else if (typeof content === 'object') {
          ctx.res.end(JSON.stringify(content));
      // this.callbackFunc(ctx).then(respond);
      compose(this.middleware)(ctx).then(respond);
   * 构造 context:
   * 将 koa request/response 对象挂载在 ctx 上，并返回
  createContext(req, res) {
    console.log('[Application] createContext');
    const ctx = Object.create(this.context);
    ctx.request = Object.create(this.request);
    ctx.response = Object.create(this.response);
    ctx.req = ctx.request.req = req;
    ctx.res = ctx.response.res = res;
    return ctx;
   * 挂载回调函数
   * @param {Function} fn 回调处理函数
    use (fn) {
    console.log('[Application] use: 注册中间件 fn')
    // this.callbackFunc = fn
    this.middleware.push(fn);
module.exports = Application;

/* 
 * 愿望： 依次执行 f1, f2, f3
async function f1(next) {
  console.log('f1');
  await next();
  console.log('/f1');
async function f2(next) {
  console.log('f2');
  await next();
  console.log('/f2');
async function f3(next) {
  console.log('f3');
  if (next) await next();
  console.log('/f3');
* 构造出一个函数，实现让三个函数依次执行的效果
var next2 = async function () {
  await f3();
var next1 = async function () {
  await f2(next2);
module.exports =  function () {
    console.log('compose')
  f1(next1);

function createNext(fn, next) {
    return async function () {
        await fn(next)
const middlewares = [f1, f2, f3];
const len = middlewares.length;
let next = async () => {
  return Promise.resolve();
for(let i = len-1; i>=0; i--){
    next = createNext(middlewares[i], next);
module.exports =  function () {
    console.log('compose');
    next();

module.exports =  function(middlewares) {
  console.log('-- enter compose --');
  return async function(ctx) {
    // next 工厂
    function createNext(fn, next) {
      return async function () {
        await fn(ctx, next)
    let next = async () => {
      return Promise.resolve();
    const len = middlewares.length;
    for(let i = len - 1; i >= 0; i--){
      next = createNext(middlewares[i], next);
    await next();
    console.log('-- exit compose --');

module.exports =  function(middlewares) {
  return async function(ctx) {
    // next 工厂 递归化
    function createNext(i) {
      fn = middlewares[i];
      if (!fn) {
        return Promise.resolve();
      return Promise.resolve(
        fn(ctx, async () => await createNext(i + 1))
    await createNext(0);

'use strict'
// const fn = compose(this.middleware);
// return fn(ctx).then(handleResponse).catch(onerror);
 * Expose compositor.
// 暴露compose函数
module.exports = compose
// compose函数需要传入一个数组队列 [fn,fn,fn,fn]
function compose (middleware) {
    console.log('compose')
  // compose函数调用后，返回的是以下这个匿名函数
  // 匿名函数接收两个参数，第一个随便传入，根据使用场景决定
  // 第一次调用时候第二个参数next实际上是一个undefined，因为初次调用并不需要传入next参数
  // 这个匿名函数返回一个promise
  return function (context, next) {
    // last called middleware #
    // 初始下标为-1
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      // 如果传入i为负数且<=-1 返回一个Promise.reject携带着错误信息
      // 所以执行两次next会报出这个错误。将状态rejected，就是确保在一个中间件中next只调用一次
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      // 执行一遍next之后,这个index值将改变
      index = i
      // 根据下标取出一个中间件函数
      let fn = middleware[i]
      // next在这个内部中是一个局部变量，值为undefined
      // 当i已经是数组的length了，说明中间件函数都执行结束，执行结束后把fn设置为undefined
      // 问题：本来middleware[i]如果i为length的话取到的值已经是undefined了，为什么要重新给fn设置为undefined呢？
      if (i === middleware.length) fn = next
      //如果中间件遍历到最后了。那么。此时return Promise.resolve()返回一个成功状态的promise
      // 方面之后做调用then
      if (!fn) return Promise.resolve()
      // 调用后依然返回一个成功的状态的Promise对象
      // 用Promise包裹中间件，方便await调用
      // 调用中间件函数，传入context（根据场景不同可以传入不同的值，在KOa传入的是ctx）
      // 第二个参数是一个next函数，可在中间件函数中调用这个函数
      // 调用next函数后，递归调用dispatch函数，目的是执行下一个中间件函数
      // next函数在中间件函数调用后返回的是一个promise对象
      // 读到这里不得不佩服作者的高明之处。
      return Promise.resolve(fn(context, function next () {