摘要：所以方法實(shí)現(xiàn)如下每次有新的請(qǐng)求，我們都需要把這次請(qǐng)求的上下文灌進(jìn)數(shù)組中的每一個(gè)中間件里。筆者在寫了這個(gè)分鐘以后去看了源碼，發(fā)現(xiàn)實(shí)現(xiàn)思路基本就是這樣，相信經(jīng)過(guò)我的這個(gè)分鐘的洗禮，你去看源碼一樣小菜一碟。

原文地址

周五組內(nèi)同學(xué)討論搞一些好玩的東西，有人提到了類似『5分鐘實(shí)現(xiàn)koa』，『100行實(shí)現(xiàn)react』的創(chuàng)意，仔細(xì)想了以后，5分鐘實(shí)現(xiàn)koa并非不能實(shí)現(xiàn)，遂有了這篇博客。

先打開koa官網(wǎng)，隨意找出了一個(gè)代表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);

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

通過(guò)koa官網(wǎng)得知，app.listen方法實(shí)際上是如下代碼的簡(jiǎn)寫

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

所以我們可以先把a(bǔ)pp.listen實(shí)現(xiàn)出來(lái)

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

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

context 上下文

middleware 中間件

request 請(qǐng)求

responce 響應(yīng)

我們先來(lái)實(shí)現(xiàn)一個(gè)最簡(jiǎn)化版的context，如下

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

這樣就完成了一個(gè)最基本的Context，別看小，已經(jīng)夠用了。
每一次有新的請(qǐng)求，都會(huì)創(chuàng)建一個(gè)新的ctx對(duì)象。

koa的中間件是一個(gè)異步函數(shù)，接受兩個(gè)參數(shù)，分別是ctx和next，其中ctx是當(dāng)前的請(qǐng)求上下文，next是下一個(gè)中間件（也是異步函數(shù)），這樣想來(lái)，我們需要一個(gè)維護(hù)中間件的數(shù)組，每次調(diào)用app.use就是往數(shù)組中push一個(gè)一步函數(shù)。所以u(píng)se方法實(shí)現(xiàn)如下

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

每次有新的請(qǐng)求，我們都需要把這次請(qǐng)求的上下文灌進(jìn)數(shù)組中的每一個(gè)中間件里。單單灌進(jìn)ctx還不夠，還要使每個(gè)中間件都能通過(guò)next函數(shù)調(diào)用到下一個(gè)中間件。當(dāng)我們調(diào)用next函數(shù)時(shí)，一般是不需要傳參數(shù)的，而被調(diào)用的中間件中一定會(huì)接收到ctx和next兩個(gè)參數(shù)。

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

let bindedMiddleware = []

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

最后我們就得到了一個(gè)next函數(shù)數(shù)組，也就是bindedMiddleware這個(gè)變量了。

http.createServer中的回調(diào)函數(shù)，每次接收到請(qǐng)求的時(shí)候會(huì)被調(diào)用，所以我們?cè)谏厦鎐allback方法的TODO位置，編寫處理請(qǐng)求的代碼, 并將上面的middleware列表轉(zhuǎn)next函數(shù)列表的代碼放入其中。

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()
  }
}

我們簡(jiǎn)單出來(lái)下相應(yīng)就好了，直接將ctx.body發(fā)送給客戶端。

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

koa的app實(shí)例上面帶有on，emit等方法，這是node events模塊實(shí)現(xiàn)好的東西。直接讓Koa類繼承自events模塊就好了。
我們?cè)賹⑸厦鎸?shí)現(xiàn)出來(lái)的handleRequest和handleResponse方法放入koa類的callback方法中，得到最終我們實(shí)現(xiàn)的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，沒(méi)什么問(wèn)題。

簡(jiǎn)版實(shí)現(xiàn)，碼糙理不糙，展示出了koa核心的東西，但少了錯(cuò)誤處理，也完全沒(méi)有考慮性能啥的，需要完善的地方還很多很多。

筆者在寫了這個(gè)5分鐘koa以后去看了koa源碼，發(fā)現(xiàn)實(shí)現(xiàn)思路基本就是這樣，相信經(jīng)過(guò)我的這個(gè)5分鐘koa的洗禮，你去看koa源碼一樣小菜一碟。

Done！