深入理解 Koa 框架中间件原理

Posted zorasia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解 Koa 框架中间件原理相关的知识,希望对你有一定的参考价值。

Node 主要用在开发 Web 应用,koa 是目前 node 里最流行的 web 框架。

在 Node 开启一个 http 服务简直易如反掌,官网 demo。

1
2
3
4
5
6
7
8
9
10
11
12
13
const http = require("http");
 
const server = http.createServer((req, res) => {
 res.statusCode = 200;
 res.setHeader("Content-Type", "text/plain");
 res.end("Hello World ");
});
 
const hostname = "127.0.0.1";
const port = 3000;
server.listen(port, hostname, () => {
 console.log(`Server running at http://${hostname}:${port}/`);
});
  • 引入 http 模块, http 的 createServer 方法创建了一个 http.Server 的实例。
  • server 监听 3000 端口。
  • 我们传入到 createServer 里的函数实际是监听 request 事件的回调,每当请求进来,监听函数就会执行。
  • request 事件的监听函数,其函数接受两个参数,分别是 req 和 res 。其中 req 是一个可读流, res 是一个可写流。我们通过 req 获取 http 请求的所有信息,同时将数据写入到 res 来对该请求作出响应。

koa 应用

koa 如何创建一个 server, 直接上个官网的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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);

中间件概念在编程中使用广泛, 不管是前端还是后端, 在实际编程中或者框架设计都有使用到这种实用的模型。

基本上,Koa 所有的功能都是通过中间件实现的。

每个中间件默认接受两个参数,第一个参数是 Context 对象,第二个参数是 next 函数。只要调用 next 函数,就可以把执行权转交给下一个中间件。

如果中间件内部没有调用 next 函数,那么执行权就不会传递下去。

多个中间件会形成一个栈结构(middle stack),以“先进后出”(first-in-last-out)的顺序执行。整个过程就像,先是入栈,然后出栈的操作。

上面代码的执行顺序是:

请求 ==> x-response-time 中间件 ==> logger 中间件 ==> response中间件 ==> logger 中间件 ==> response-time 中间件 ==> 响应

理解 Koa 的中间件机制(源码分析)

阅读源码,化繁为简,我们看看 koa 的中间件系统是如何实现的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Application extends Emitter {
 constructor() {
  super();
  this.middleware = [];
 },
 
 use(fn) {
  this.middleware.push(fn);
  return this;
 },
 
 callback() {
  const fn = compose(this.middleware);
 
  return function(req, res) {
   return fn(ctx);
  };
 },
 
 listen(...args) {
  const server = http.createServer(this.callback());
  return server.listen(...args);
 }
}

好了,精简结束,一不小心,去枝末节,最后只剩下不到 20 行代码。

这就是框架的核心,简化后的代码非常清晰,有点不可思议,但核心就是这么简单。

我们先分析以上代码做了什么事。

  • 我们定义了一个 middleware 数组来存储中间件。
  • 我们定一个了一个 use 方法来注册一个中间件。其实就是简单的 push 到自身的 mideware 这个数组中。
  • 我们还使用了一个 compose 方法,传入 middleware ,应该是做了一些处理,返回了一个可执行的方法。

你一定对中间的 compose 方法很好奇,初此之外的代码都容易理解,唯独这个 compose 不太知道究竟做了什么。

其实, compose 就是整个中间件框架的核心。

compose 之外,代码已经很清楚的定义了

  • 中间件的存储
  • 中间件的注册

而 compose 方法做了最为重要的一件事

  • 中间件的执行

核心源码 compose

先上码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function compose(middleware) {
 return function(context, next) {
  // last called middleware #
  let index = -1;
  return dispatch(0);
  function dispatch(i) {
   if (i <= index)
    return Promise.reject(new Error("next() called multiple times"));
   index = i;
   let fn = middleware[i];
   if (i === middleware.length) fn = next;
   if (!fn) return Promise.resolve();
   try {
    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
   } catch (err) {
    return Promise.reject(err);
   }
  }
 };
}

我试图去简化一下这个方法,但方法本身已经足够简洁。

代码很简洁。

通过 next()传递 实现中间件调用, 结合 Promise 采用 递归调用 的通知机制。

看图

技术分享图片

这种形式的控制流让整个 Koa 框架中间件的访问呈现出 自上而下的中间件流 + 自下而上的 response 数据流 的形式。

Koa 本身做的工作仅仅是定制了中间件的编写规范,而不内置任何中间件。一个 web request 会通过 Koa 的中间件栈,来动态完成 response 的处理。

koa 在中间件语法上面采用了 async + await 语法来生成 Promise 形式的程序控制流。

总结

koa 是非常精简的框架, 其中的精粹思想就是洋葱模型(中间件模型), koa 框架的中间件模型非常好用并且简洁, 但是也有自身的缺陷, 一旦中间件数组过于庞大, 性能会有所下降,我们需要结合自身的情况与业务场景作出最合适的选择.

 

     
技术分享图片 某风网前端视频教程 技术分享图片
技术分享图片 2017年nodejs+mongodb基础班+就业班项目实战视频教程30G
技术分享图片 跟着江哥从零狂虐H5+跨平台开发【视频+原创笔记+配套代码+IDE等资料打包】
技术分享图片 传智web前端学习视频共3套教程
技术分享图片 基于NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战
技术分享图片 张恩民老师 HTML5视频教程 13讲HTML入门视频教程-编程开发教程
技术分享图片 Nodejs 项目的线上服务器部署与发布  ...2
技术分享图片 NodeJs全栈开发之博客系统 技术分享图片
技术分享图片 麦子学院基于Node.js的web实时聊天室项目 技术分享图片
技术分享图片 菜鸟变高手网页特效,js特效,jQuery特效,幻灯轮播图教程
技术分享图片 2017年c智播客h马程序员H5全栈工程师培训视频教程 技术分享图片  ...2
技术分享图片 2017年nodejs+mongodb项目实战 技术分享图片
技术分享图片 2017全套零基础入门自学bootstrap3视频教程响应式项目实战开发 技术分享图片
技术分享图片 珠峰Node.js全栈开发  ...2
技术分享图片 彻底征服 React.js 技术分享图片
技术分享图片 腾讯大牛亲授 Web 前后端漏洞分析与防御技巧 技术分享图片  ...2
技术分享图片 前端JavaScript面试技巧  ...2
技术分享图片 2017最新apicloud全集(从基础到实战 6个实战项目) 技术分享图片  ...2
技术分享图片 WEB 开发 LoadRunner使用指南 学习资料
技术分享图片 让你惊叹不已的HTML5画布Canvas绘图技术应用详解  ...23

以上是关于深入理解 Koa 框架中间件原理的主要内容,如果未能解决你的问题,请参考以下文章

理解 Koa 框架中间件原理

深入浅出koa洋葱模型

koa2中间件koa和koa-compose源码分析原理

干货 | koa 包教包会系列1 —— 白话 koa

koa2、koa1、express比较

深入理解PHP原理之Opcodes