摘要：所以方法實現如下每次有新的請求，我們都需要把這次請求的上下文灌進數組中的每一個中間件里。筆者在寫了這個分鐘以后去看了源碼，發現實現思路基本就是這樣，相信經過我的這個分鐘的洗禮，你去看源碼一樣小菜一碟。

原文地址

周五組內同學討論搞一些好玩的東西，有人提到了類似『5分鐘實現koa』，『100行實現react』的創意，仔細想了以后，5分鐘實現koa并非不能實現，遂有了這篇博客。

先打開koa官網，隨意找出了一個代表koa核心功能的的demo就可以，如下

const Koa = require("koa");
const app = new Koa();

// x-response-time
app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  ctx.set("X-Response-Time", `${ms}ms`);
});

// logger
app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}`);
});

// response
app.use(async ctx => {
  ctx.body = "Hello World";
});

app.listen(3000);

最終要實現的效果是實現的一個5min-koa模塊，直接將代碼中第一行替換為const Koa = require("./5min-koa");，程序可以正常執行就可以了。

通過koa官網得知，app.listen方法實際上是如下代碼的簡寫

const http = require("http");
const Koa = require("koa");
const app = new Koa();
http.createServer(app.callback()).listen(3000);

所以我們可以先把app.listen實現出來

class Koa {
  constructor() {}
  callback() {
    return (req, res) => {
      // TODO
    }
  }
  listen(port) {
    http.createServer(this.callback()).listen(port);
  }
}

koa的核心分為四部分，分別是

context 上下文

middleware 中間件

request 請求

responce 響應

我們先來實現一個最簡化版的context，如下

class Context {
  constructor(app, req, res) {
    this.app = app
    this.req = req
    this.res = res
    // 為了盡可能縮短實現時間，我們直接使用原生的res和req，沒有實現ctx上的ctx.request ctx.response
    // ctx.request ctx.response只是在原生res和req上包裝處理了一層
  }
  // 實現一些demo中使用到的ctx上代理的方法
  get set() { return this.res.setHeader }
  get method() { return this.req.method }
  get url() { return this.req.url }
}

這樣就完成了一個最基本的Context，別看小，已經夠用了。
每一次有新的請求，都會創建一個新的ctx對象。

koa的中間件是一個異步函數，接受兩個參數，分別是ctx和next，其中ctx是當前的請求上下文，next是下一個中間件（也是異步函數），這樣想來，我們需要一個維護中間件的數組，每次調用app.use就是往數組中push一個一步函數。所以use方法實現如下

use(middleware) {
  this.middlewares.push(middleware)
}

每次有新的請求，我們都需要把這次請求的上下文灌進數組中的每一個中間件里。單單灌進ctx還不夠，還要使每個中間件都能通過next函數調用到下一個中間件。當我們調用next函數時，一般是不需要傳參數的，而被調用的中間件中一定會接收到ctx和next兩個參數。

調用方不需要傳參，被調用方卻能接到參數，這讓我立刻想到bind方法，只要將每一個中間件所需要的ctx和next都提前綁定好，問題就解決了。下面的代碼就是通過bind方法，將用戶傳入的middleware列表轉換成next函數列表

let bindedMiddleware = []

for (let i = middlewares.length - 1; i >= 0; i--) {
  if (middlewares.length == i + 1) {
    // 最后一個中間件，next方法設置為Promise.resolve
    bindedMiddleware.unshift(middlewares[i].bind(ctx.app, ctx, Promise.resolve))
  } else {
    bindedMiddleware.unshift(middlewares[i].bind(ctx.app, ctx, bindedMiddleware[0]))
  }
}

最后我們就得到了一個next函數數組，也就是bindedMiddleware這個變量了。

http.createServer中的回調函數，每次接收到請求的時候會被調用，所以我們在上面callback方法的TODO位置，編寫處理請求的代碼, 并將上面的middleware列表轉next函數列表的代碼放入其中。

function handleRequest(ctx, middlewares) {
  if (middlewares && middlewares.length > 0) {
    let bindedMiddleware = []
    for (let i = middlewares.length - 1; i >= 0; i--) {
      if (middlewares.length == i + 1) {
        bindedMiddleware.unshift(middlewares[i].bind(ctx.app, ctx, Promise.resolve))
      } else {
        bindedMiddleware.unshift(middlewares[i].bind(ctx.app, ctx, bindedMiddleware[0]))
      }
    }
    return bindedMiddleware[0]()
  } else {
    return Promise.resolve()
  }
}

我們簡單出來下相應就好了，直接將ctx.body發送給客戶端。

function handleResponse (ctx) {
  return function() {
    ctx.res.writeHead(200, { "Content-Type": "text/plain" });
    ctx.res.end(ctx.body);
  }
}

koa的app實例上面帶有on，emit等方法，這是node events模塊實現好的東西。直接讓Koa類繼承自events模塊就好了。
我們再將上面實現出來的handleRequest和handleResponse方法放入koa類的callback方法中，得到最終我們實現的Koa，一共58行代碼，如下

const http = require("http");
const Emitter = require("events");

class Context {
  constructor(app, req, res) {
    this.app = app;
    this.req = req;
    this.res = res;
  }
  get set() { return this.res.setHeader }
  get method() { return this.req.method }
  get url() { return this.req.url }
}

class Koa extends Emitter{
  constructor(options) {
    super();
    this.options = options
    this.middlewares = [];
  }
  use(middleware) {
    this.middlewares.push(middleware);
  }
  callback() {
    return (req, res) => {
      let ctx = new Context(this, req, res);
      handleRequest(ctx, this.middlewares).then(handleResponse(ctx));
    }
  }
  listen(port) {
    http.createServer(this.callback()).listen(port);
  }
}

function handleRequest(ctx, middlewares) {
  if (middlewares && middlewares.length > 0) {
    let bindedMiddleware = [];
    for (let i = middlewares.length - 1; i >= 0; i--) {
      if (middlewares.length == i + 1) {
        bindedMiddleware.unshift(middlewares[i].bind(ctx.app, ctx, Promise.resolve));
      } else {
        bindedMiddleware.unshift(middlewares[i].bind(ctx.app, ctx, bindedMiddleware[0]));
      }
    }
    return bindedMiddleware[0]();
  } else {
    return Promise.resolve();
  }
}

function handleResponse (ctx) {
  return function() {
    ctx.res.writeHead(200, { "Content-Type": "text/plain" });
    ctx.res.end(ctx.body);
  }
}

module.exports = Koa;

試試跑一下篇首的Demo，沒什么問題。

簡版實現，碼糙理不糙，展示出了koa核心的東西，但少了錯誤處理，也完全沒有考慮性能啥的，需要完善的地方還很多很多。

筆者在寫了這個5分鐘koa以后去看了koa源碼，發現實現思路基本就是這樣，相信經過我的這個5分鐘koa的洗禮，你去看koa源碼一樣小菜一碟。

Done！