這篇文章會(huì)講些什么？

• 如何從零開始完成一個(gè)涵蓋Koa核心功能的Node.js類庫
• 從代碼層面解釋Koa一些代碼寫法的原因：如中間件為什么必須調(diào)用next函數(shù)、ctx是怎么來的和一個(gè)請求是什么關(guān)系

我們知道Koa類庫主要有以下幾個(gè)重要特性：

• 支持洋蔥圈模型的中間件機(jī)制
• 封裝request、response提供context對象，方便http操作
• 異步函數(shù)、中間件的錯(cuò)誤處理機(jī)制

第一步：基礎(chǔ)Server運(yùn)行

目標(biāo)：完成基礎(chǔ)可行新的Koa Server

• 支持app.listen監(jiān)聽端口啟動(dòng)Server
• 支持app.use添加類middleware處理函數(shù)

核心代碼如下：

class Koa {
  private middleware: middlewareFn = () => {};
  constructor() {}
  listen(port: number, cb: noop) {
    const server = http.createServer((req, res) => {
      this.middleware(req, res);
    });
    return server.listen(port, cb);
  }
  use(middlewareFn: middlewareFn) {
    this.middleware = middlewareFn;
    return this;
  }
}

const app = new Koa();
app.use((req, res) => {
  res.writeHead(200);
  res.end("A request come in");
});
app.listen(3000, () => {
  console.log("Server listen on port 3000");
});

第二步：洋蔥圈中間件機(jī)制實(shí)現(xiàn)

目標(biāo)：接下來我們要完善listen和use方法，實(shí)現(xiàn)洋蔥圈中間件模型

如下面代碼所示，在這一步中我們希望app.use能夠支持添加多個(gè)中間件，并且中間件是按照洋蔥圈(類似深度遞歸調(diào)用)的方式順序執(zhí)行

app.use(async (req, res, next) => {
  console.log("middleware 1 start");
  // 具體原因我們會(huì)在下面代碼實(shí)現(xiàn)詳細(xì)講解
  await next();
  console.log("middleware 1 end");
});
app.use(async (req, res, next) => {
  console.log("middleware 2 start");
  await next();
  console.log("middleware 2 end");
});
app.use(async (req, res, next) => {
  res.writeHead(200);
  res.end("An request come in");
  await next();
});
app.listen(3000, () => {
  console.log("Server listen on port 3000");
});

上述Demo有三個(gè)需要我們注意的點(diǎn)：

• 在中間件中next()函數(shù)必須且只能調(diào)用一次
• 調(diào)用next函數(shù)時(shí)必須使用await

我們會(huì)在接下來的代碼中逐個(gè)分析這些使用方法的原因，下面我們來看一看具體怎么實(shí)現(xiàn)這種洋蔥圈機(jī)制：

class Koa {
  ...
  use(middlewareFn: middlewareFn) {
    // 1、調(diào)用use時(shí)，使用數(shù)組存貯所有的middleware
    this.middlewares.push(middlewareFn);
    return this;
  }
  listen(port: number, cb: noop) {
    // 2、 通過composeMiddleware將中間件數(shù)組轉(zhuǎn)換為串行[洋蔥圈]調(diào)用的函數(shù)，在createServer中回調(diào)函數(shù)中調(diào)用
    // 所以真正的重點(diǎn)就是 composeMiddleware，如果做到的，我們接下來看該函數(shù)的實(shí)現(xiàn)
    // BTW: 從這里可以看到 fn 是在listen函數(shù)被調(diào)用之后就生成了，這就意味著我們不能在運(yùn)行時(shí)動(dòng)態(tài)的添加middleware
    const fn = composeMiddleware(this.middlewares);
    const server = http.createServer(async (req, res) => {
      await fn(req, res);
    });
    return server.listen(port, cb);
  }
}

// 3、洋蔥圈模型的核心：
// 入?yún)ⅲ核惺占闹虚g件
// 返回：串行調(diào)用中間件數(shù)組的函數(shù)
function composeMiddleware(middlewares: middlewareFn[]) {
  return (req: IncomingMessage, res: ServerResponse) => {
    let start = -1;
    // dispatch：觸發(fā)第i個(gè)中間件執(zhí)行
    function dispatch(i: number) {
      // 剛開始可能不理解這里為什么這么判斷，可以看完整個(gè)函數(shù)在來思考這個(gè)問題
      // 正常情況下每次調(diào)用前 start < i，調(diào)用完next() 應(yīng)該 start === i
      // 如果調(diào)用多次next()，第二次及以后調(diào)用因?yàn)橹耙淹瓿蓅tart === i賦值，所以會(huì)導(dǎo)致 start >= i
      if (i <= start) {
        return Promise.reject(new Error("next() call more than once!"));
      }
      if (i >= middlewares.length) {
        return Promise.resolve();
      }
      start = i;
      const middleware = middlewares[i];
      // 重點(diǎn)來了！??！
      // 取出第i個(gè)中間件執(zhí)行，并將dispatch(i+1)作為next函數(shù)傳給各下一個(gè)中間件
      return middleware(req, res, () => {
        return dispatch(i + 1);
      });
    }
    return dispatch(0);
  };
}

主要涉及到Promise幾個(gè)知識點(diǎn)：

• async 函數(shù)返回的是一個(gè)Promise對象【所以的中間件都會(huì)返回一個(gè)promise對象】
• async 函數(shù)內(nèi)部遇到 await 調(diào)用時(shí)會(huì)暫停執(zhí)行await函數(shù)，等待返回結(jié)果后繼續(xù)向下執(zhí)行
• async 函數(shù)內(nèi)部發(fā)生錯(cuò)誤會(huì)導(dǎo)致返回的Promise變?yōu)閞eject狀態(tài)

現(xiàn)在我們在回顧之前提出的幾個(gè)問題：

1. koa中間件中為什么必須且只能調(diào)用一次next函數(shù)

    可以看到如果不調(diào)用next，就不會(huì)觸發(fā)dispatch(i+1)，下一個(gè)中間件就沒辦法觸發(fā)，造成假死狀態(tài)最終請求超時(shí)
    
    調(diào)用多次next則會(huì)導(dǎo)致下一個(gè)中間件執(zhí)行多次
   

2. next() 調(diào)用為什么需要加 await

    這也是洋蔥圈調(diào)用機(jī)制的核心，當(dāng)執(zhí)行到 await next()，會(huì)執(zhí)行next()【調(diào)用下一個(gè)中間件】等待返回結(jié)果，在接著向下執(zhí)行
   

第三步：Context提供

目標(biāo)：封裝Context，提供request、response的便捷操作方式

// 1、 定義KoaRequest、KoaResponse、KoaContext
interface KoaContext {
  request?: KoaRequest;
  response?: KoaResponse;
  body: String | null;
}
const context: KoaContext = {
  get body() {
    return this.response!.body;
  },
  set body(body) {
    this.response!.body = body;
  }
};

function composeMiddleware(middlewares: middlewareFn[]) {
  return (context: KoaContext) => {
    let start = -1;
    function dispatch(i: number) {
      // ..省略其他代碼..
      // 2、所有的中間件接受context參數(shù)
      middleware(context, () => {
        return dispatch(i + 1);
      });
    }
    return dispatch(0);
  };
}

class Koa {
  private context: KoaContext = Object.create(context);
  listen(port: number, cb: noop) {
    const fn = composeMiddleware(this.middlewares);
    const server = http.createServer(async (req, res) => {
      // 3、利用req、res創(chuàng)建context對象
      // 這里需要注意：context是創(chuàng)建一個(gè)新的對象，而不是直接賦值給this.context
      // 因?yàn)閏ontext適合請求相關(guān)聯(lián)的，這里也保證了每一個(gè)請求都是一個(gè)新的context對象
      const context = this.createContext(req, res);
      await fn(context);
      if (context.response && context.response.res) {
        context.response.res.writeHead(200);
        context.response.res.end(context.body);
      }
    });
    return server.listen(port, cb);
  }
  // 4、創(chuàng)建context對象
  createContext(req: IncomingMessage, res: ServerResponse): KoaContext {
    // 為什么要使用Object.create而不是直接賦值？
    // 原因同上需要保證每一次請求request、response、context都是全新的
    const request = Object.create(this.request);
    const response = Object.create(this.response);
    const context = Object.create(this.context);
    request.req = req;
    response.res = res;
    context.request = request;
    context.response = response;
    return context;
  }
}

第四步：異步函數(shù)錯(cuò)誤處理機(jī)制

目標(biāo)：支持通過 app.on("error")，監(jiān)聽錯(cuò)誤事件處理異常

我們回憶下在Koa中如何處理異常，代碼可能類似如下：

app.use(async (context, next) => {
  console.log("middleware 2 start");
  // throw new Error("出錯(cuò)了");
  await next();
  console.log("middleware 2 end");
});

// koa統(tǒng)一錯(cuò)誤處理：監(jiān)聽error事件
app.on("error", (error, context) => {
  console.error(`請求${context.url}發(fā)生了錯(cuò)誤`);
});

從上面的代碼可以看到核心在于：

• Koa實(shí)例app需要支持事件觸發(fā)、事件監(jiān)聽能力
• 需要我們捕獲異步函數(shù)異常，并觸發(fā)error事件

下面我們看具體代碼如何實(shí)現(xiàn)：

// 1、繼承EventEmitter，增加事件觸發(fā)、監(jiān)聽能力
class Koa extends EventEmitter {
  listen(port: number, cb: noop) {
    const fn = composeMiddleware(this.middlewares);
    const server = http.createServer(async (req, res) => {
      const context = this.createContext(req, res);
      // 2、await調(diào)用fn，可以使用try catch捕獲異常，觸發(fā)異常事件
      try {
        await fn(context);
        if (context.response && context.response.res) {
          context.response.res.writeHead(200);
          context.response.res.end(context.body);
        }
      } catch (error) {
        console.error("Server Error");
        // 3、觸發(fā)error時(shí)提供context更多信息，方面日志記錄，定位問題
        this.emit("error", error, context);
      }
    });
    return server.listen(port, cb);
  }
}

總結(jié)

至此我們已經(jīng)使用TypeScript完成簡版Koa類庫，支持了

• 洋蔥圈中間件機(jī)制
• Context封裝request、response
• 異步異常錯(cuò)誤處理機(jī)制

完整Demo代碼可以參考koa2-reference

更多精彩文章，歡迎大家Star我們的倉庫，我們每周都會(huì)推出幾篇高質(zhì)量的大前端領(lǐng)域相關(guān)文章。

參考資料

• 深入理解 Koa2 中間件機(jī)制
• 可能是目前最全的koa源碼解析指南