如何更好地理解中间件和洋葱模型

 相信用过 Koa、Redux 或 Express 的小伙伴对中间件都不会陌生，特别是在学习 Koa 的过程中，还会接触到 “洋葱模型”。

创新互联建站专业为企业提供罗湖网站建设、罗湖做网站、罗湖网站设计、罗湖网站制作等企业网站建设、网页设计与制作、罗湖企业网站模板建站服务，十载罗湖做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

本文阿宝哥将跟大家一起来学习 Koa 的中间件，不过这里阿宝哥不打算一开始就亮出广为人知的 “洋葱模型图”，而是先来介绍一下 Koa 中的中间件是什么?

一、Koa 中间件

在 @types/koa-compose 包下的 index.d.ts 头文件中我们找到了中间件类型的定义：

 
 
 
 
    
  
  
  
  
  1. // @types/koa-compose/index.d.ts 
    2.   
  
  
  
  2. declare namespace compose { 
    3.   
  
  
  
  3.   type Middleware = (context: T, next: Koa.Next) => any; 
    4.   
  
  
  
  4.   type ComposedMiddleware = (context: T, next?: Koa.Next) => Promise; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7. // @types/koa/index.d.ts => Koa.Next 
    8.   
  
  
  
  8. type Next = () => Promise; 
    9.

通过观察 Middleware 类型的定义，我们可以知道在 Koa 中，中间件就是普通的函数，该函数接收两个参数：context 和 next。其中 context 表示上下文对象，而 next 表示一个调用后返回 Promise 对象的函数对象。

了解完 Koa 的中间件是什么之后，我们来介绍 Koa 中间件的核心，即 compose 函数：

 
 
 
 
    
  
  
  
  
  1. function wait(ms) { 
    2.   
  
  
  
  2.   return new Promise((resolve) => setTimeout(resolve, ms || 1)); 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const arr = []; 
    6.   
  
  
  
  6. const stack = []; 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. // type Middleware = (context: T, next: Koa.Next) => any; 
    9.   
  
  
  
  9. stack.push(async (context, next) => { 
    10.   
  
  
  
  10.   arr.push(1); 
    11.   
  
  
  
  11.   await wait(1); 
    12.   
  
  
  
  12.   await next(); 
    13.   
  
  
  
  13.   await wait(1); 
    14.   
  
  
  
  14.   arr.push(6); 
    15.   
  
  
  
  15. }); 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. stack.push(async (context, next) => { 
    18.   
  
  
  
  18.   arr.push(2); 
    19.   
  
  
  
  19.   await wait(1); 
    20.   
  
  
  
  20.   await next(); 
    21.   
  
  
  
  21.   await wait(1); 
    22.   
  
  
  
  22.   arr.push(5); 
    23.   
  
  
  
  23. }); 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25. stack.push(async (context, next) => { 
    26.   
  
  
  
  26.   arr.push(3); 
    27.   
  
  
  
  27.   await wait(1); 
    28.   
  
  
  
  28.   await next(); 
    29.   
  
  
  
  29.   await wait(1); 
    30.   
  
  
  
  30.   arr.push(4); 
    31.   
  
  
  
  31. }); 
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33. await compose(stack)({}); 
    34.

对于以上的代码，我们希望执行完 compose(stack)({}) 语句之后，数组 arr 的值为 [1, 2, 3, 4, 5, 6]。这里我们先不关心 compose 函数是如何实现的。我们来分析一下，如果要求数组 arr 输出期望的结果，上述 3 个中间件的执行流程：

1.开始执行第 1 个中间件，往 arr 数组压入 1，此时 arr 数组的值为 [1]，接下去等待 1 毫秒。为了保证 arr 数组的第 1 项为 2，我们需要在调用 next 函数之后，开始执行第 2 个中间件。

2.开始执行第 2 个中间件，往 arr 数组压入 2，此时 arr 数组的值为 [1, 2]，继续等待 1 毫秒。为了保证 arr 数组的第 2 项为 3，我们也需要在调用 next 函数之后，开始执行第 3 个中间件。

3.开始执行第 3 个中间件，往 arr 数组压入 3，此时 arr 数组的值为 [1, 2, 3]，继续等待 1 毫秒。为了保证 arr 数组的第 3 项为 4，我们要求在调用第 3 个中间的 next 函数之后，要能够继续往下执行。

4.当第 3 个中间件执行完成后，此时 arr 数组的值为 [1, 2, 3, 4]。因此为了保证 arr 数组的第 4 项为 5，我们就需要在第 3 个中间件执行完成后，返回第 2 个中间件 next 函数之后语句开始执行。

5.当第 2 个中间件执行完成后，此时 arr 数组的值为 [1, 2, 3, 4, 5]。同样，为了保证 arr 数组的第 5 项为 6，我们就需要在第 2 个中间件执行完成后，返回第 1 个中间件 next函数之后语句开始执行。

6.当第 1 个中间件执行完成后，此时 arr 数组的值为 [1, 2, 3, 4, 5, 6]。

为了更直观地理解上述的执行流程，我们可以把每个中间件当做 1 个大任务，然后在以 next 函数为分界点，在把每个大任务拆解为 3 个 beforeNext、next 和 afterNext 3 个小任务。

在上图中，我们从中间件一的 beforeNext 任务开始执行，然后按照紫色箭头的执行步骤完成中间件的任务调度。在 77.9K 的 Axios 项目有哪些值得借鉴的地方 这篇文章中，阿宝哥从 任务注册、任务编排和任务调度 3 个方面去分析 Axios 拦截器的实现。同样，阿宝哥将从上述 3 个方面来分析 Koa 中间件机制。

1.1 任务注册

在 Koa 中，我们创建 Koa 应用程序对象之后，就可以通过调用该对象的 use 方法来注册中间件：

 
 
 
 
    
  
  
  
  
  1. const Koa = require('koa'); 
    2.   
  
  
  
  2. const app = new Koa(); 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. app.use(async (ctx, next) => { 
    5.   
  
  
  
  5.   const start = Date.now(); 
    6.   
  
  
  
  6.   await next(); 
    7.   
  
  
  
  7.   const ms = Date.now() - start; 
    8.   
  
  
  
  8.   console.log(`${ctx.method} ${ctx.url} - ${ms}ms`); 
    9.   
  
  
  
  9. }); 
    10.

其实 use 方法的实现很简单，在 lib/application.js 文件中，我们找到了它的定义：

 
 
 
 
    
  
  
  
  
  1. // lib/application.js 
    2.   
  
  
  
  2. module.exports = class Application extends Emitter {   
    3.   
  
  
  
  3.   constructor(options) { 
    4.   
  
  
  
  4.     super(); 
    5.   
  
  
  
  5.     // 省略部分代码  
    6.   
  
  
  
  6.     this.middleware = []; 
    7.   
  
  
  
  7.   } 
    8.   
  
  
  
  8.    
    9.   
  
  
  
  9.  use(fn) { 
    10.   
  
  
  
  10.    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!'); 
    11.   
  
  
  
  11.    // 省略部分代码  
    12.   
  
  
  
  12.    this.middleware.push(fn); 
    13.   
  
  
  
  13.    return this; 
    14.   
  
  
  
  14.   } 
    15.   
  
  
  
  15. } 
    16.

由以上代码可知，在 use 方法内部会对 fn 参数进行类型校验，当校验通过时，会把 fn 指向的中间件保存到 middleware 数组中，同时还会返回 this 对象，从而支持链式调用。

1.2 任务编排

在 77.9K 的 Axios 项目有哪些值得借鉴的地方 这篇文章中，阿宝哥参考 Axios 拦截器的设计模型，抽出以下通用的任务处理模型：

在该通用模型中，阿宝哥是通过把前置处理器和后置处理器分别放到 CoreWork 核心任务的前后来完成任务编排。而对于 Koa 的中间件机制来说，它是通过把前置处理器和后置处理器分别放到 await next() 语句的前后来完成任务编排

 
 
 
 
    
  
  
  
  
  1. // 统计请求处理时长的中间件 
    2.   
  
  
  
  2. app.use(async (ctx, next) => { 
    3.   
  
  
  
  3.   const start = Date.now(); 
    4.   
  
  
  
  4.   await next(); 
    5.   
  
  
  
  5.   const ms = Date.now() - start; 
    6.   
  
  
  
  6.   console.log(`${ctx.method} ${ctx.url} - ${ms}ms`); 
    7.   
  
  
  
  7. }); 
    8.

1.3 任务调度

通过前面的分析，我们已经知道了，使用 app.use 方法注册的中间件会被保存到内部的 middleware 数组中。要完成任务调度，我们就需要不断地从 middleware 数组中取出中间件来执行。中间件的调度算法被封装到 koa-compose 包下的 compose 函数中，该函数的具体实现如下：

 
 
 
 
    
  
  
  
  
  1. /** 
    2.   
  
  
  
  2.  * Compose `middleware` returning 
    3.   
  
  
  
  3.  * a fully valid middleware comprised 
    4.   
  
  
  
  4.  * of all those which are passed. 
    5.   
  
  
  
  5.  * 
    6.   
  
  
  
  6.  * @param {Array} middleware 
    7.   
  
  
  
  7.  * @return {Function} 
    8.   
  
  
  
  8.  * @api public 
    9.   
  
  
  
  9.  */ 
    10.   
  
  
  
  10. function compose(middleware) { 
    11.   
  
  
  
  11.   // 省略部分代码 
    12.   
  
  
  
  12.   return function (context, next) { 
    13.   
  
  
  
  13.     // last called middleware # 
    14.   
  
  
  
  14.     let index = -1; 
    15.   
  
  
  
  15.     return dispatch(0); 
    16.   
  
  
  
  16.     function dispatch(i) { 
    17.   
  
  
  
  17.       if (i <= index) 
    18.   
  
  
  
  18.         return Promise.reject(new Error("next() called multiple times")); 
    19.   
  
  
  
  19.       index = i; 
    20.   
  
  
  
  20.       let fn = middleware[i]; 
    21.   
  
  
  
  21.       if (i === middleware.length) fn = next; 
    22.   
  
  
  
  22.       if (!fn) return Promise.resolve(); 
    23.   
  
  
  
  23.       try { 
    24.   
  
  
  
  24.         return Promise.resolve(fn(context, dispatch.bind(null, i + 1))); 
    25.   
  
  
  
  25.       } catch (err) { 
    26.   
  
  
  
  26.         return Promise.reject(err); 
    27.   
  
  
  
  27.       } 
    28.   
  
  
  
  28.     } 
    29.   
  
  
  
  29.   }; 
    30.   
  
  
  
  30. } 
    31.

compose 函数接收一个参数，该参数的类型是数组，调用该函数之后会返回一个新的函数。接下来我们将以前面的例子为例，来分析一下 await compose(stack)({}); 语句的执行过程。

1.3.1 dispatch(0)

由上图可知，当在第一个中间件内部调用 next 函数，其实就是继续调用 dispatch 函数，此时参数 i 的值为 1。

1.3.2 dispatch(1)

由上图可知，当在第二个中间件内部调用 next 函数，仍然是调用 dispatch 函数，此时参数 i 的值为 2。

1.3.3 dispatch(2)

由上图可知，当在第三个中间件内部调用 next 函数，仍然是调用 dispatch 函数，此时参数 i 的值为 3。

1.3.4 dispatch(3)

由上图可知，当 middleware 数组中的中间件都开始执行之后，如果调度时未显式地设置 next 参数的值，则会开始返回 next 函数之后的语句继续往下执行。当第三个中间件执行完成后，就会返回第二中间件 next 函数之后的语句继续往下执行，直到所有中间件中定义的语句都执行完成。

分析完 compose 函数的实现代码，我们来看一下 Koa 内部如何利用 compose 函数来处理已注册的中间件。

 
 
 
 
    
  
  
  
  
  1. const Koa = require('koa'); 
    2.   
  
  
  
  2. const app = new Koa(); 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. // 响应 
    5.   
  
  
  
  5. app.use(ctx => { 
    6.   
  
  
  
  6.   ctx.body = '大家好，我是阿宝哥'; 
    7.   
  
  
  
  7. }); 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. app.listen(3000); 
    10.

利用以上的代码，我就可以快速启动一个服务器。其中 use 方法我们前面已经分析过了，所以接下来我们来分析 listen 方法，该方法的实现如下所示：

 
 
 
 
    
  
  
  
  
  1. // lib/application.js 
    2.   
  
  
  
  2. module.exports = class Application extends Emitter {   
    3.   
  
  
  
  3.   listen(...args) { 
    4.   
  
  
  
  4.     debug('listen'); 
    5.   
  
  
  
  5.     const server = http.createServer(this.callback()); 
    6.   
  
  
  
  6.     return server.listen(...args); 
    7.   
  
  
  
  7.   } 
    8.   
  
  
  
  8. } 
    9.

很明显在 listen 方法内部，会先通过调用 Node.js 内置 HTTP 模块的 createServer 方法来创建服务器，然后开始监听指定的端口，即开始等待客户端的连接。

另外，在调用 http.createServer 方法创建 HTTP 服务器时，我们传入的参数是 this.callback()，该方法的具体实现如下所示：

 
 
 
 
    
  
  
  
  
  1. // lib/application.js 
    2.   
  
  
  
  2. const compose = require('koa-compose'); 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. module.exports = class Application extends Emitter {   
    5.   
  
  
  
  5.   callback() { 
    6.   
  
  
  
  6.     const fn = compose(this.middleware); 
    7.   
  
  
  
  7.     if (!this.listenerCount('error')) this.on('error', this.onerror); 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.     const handleRequest = (req, res) => { 
    10.   
  
  
  
  10.       const ctx = this.createContext(req, res); 
    11.   
  
  
  
  11.       return this.handleRequest(ctx, fn); 
    12.   
  
  
  
  12.     }; 
    13.   
  
  
  
  13.     return handleRequest; 
    14.   
  
  
  
  14.   } 
    15.

在 callback 方法内部，我们终于见到了久违的 compose 方法。当调用 callback 方法之后，会返回 handleRequest 函数对象用来处理 HTTP 请求。每当 Koa 服务器接收到一个客户端请求时，都会调用 handleRequest 方法，在该方法会先创建新的 Context 对象，然后在执行已注册的中间件来处理已接收的 HTTP 请求：

 
 
 
 
    
  
  
  
  
  1. module.exports = class Application extends Emitter {   
    2.   
  
  
  
  2.   handleRequest(ctx, fnMiddleware) { 
    3.   
  
  
  
  3.     const res = ctx.res; 
    4.   
  
  
  
  4.     res.statusCode = 404; 
    5.   
  
  
  
  5.     const onerror = err => ctx.onerror(err); 
    6.   
  
  
  
  6.     const handleResponse = () => respond(ctx); 
    7.   
  
  
  
  7.     onFinished(res, onerror); 
    8.   
  
  
  
  8.     return fnMiddleware(ctx).then(handleResponse).catch(onerror); 
    9.   
  
  
  
  9.   } 
    10.   
  
  
  
  10. } 
    11.

好的，Koa 中间件的内容已经基本介绍完了，对 Koa 内核感兴趣的小伙伴，可以自行研究一下。接下来我们来介绍洋葱模型及其应用。

二、洋葱模型2.1 洋葱模型简介

(图片来源：https://eggjs.org/en/intro/egg-and-koa.html)

在上图中，洋葱内的每一层都表示一个独立的中间件，用于实现不同的功能，比如异常处理、缓存处理等。每次请求都会从左侧开始一层层地经过每层的中间件，当进入到最里层的中间件之后，就会从最里层的中间件开始逐层返回。因此对于每层的中间件来说，在一个 请求和响应 周期中，都有两个时机点来添加不同的处理逻辑。

2.2 洋葱模型应用

除了在 Koa 中应用了洋葱模型之外，该模型还被广泛地应用在 Github 上一些不错的项目中，比如 koa-router 和阿里巴巴的 midway、umi-request 等项目中。

介绍完 Koa 的中间件和洋葱模型，阿宝哥根据自己的理解，抽出以下通用的任务处理模型：

上图中所述的中间件，一般是与业务无关的通用功能代码，比如用于设置响应时间的中间件：

 
 
 
 
    
  
  
  
  
  1. // x-response-time 
    2.   
  
  
  
  2. async function responseTime(ctx, next) { 
    3.   
  
  
  
  3.   const start = new Date(); 
    4.   
  
  
  
  4.   await next(); 
    5.   
  
  
  
  5.   const ms = new Date() - start; 
    6.   
  
  
  
  6.   ctx.set("X-Response-Time", ms + "ms"); 
    7.   
  
  
  
  7. } 
    8.

其实，对于每个中间件来说，前置处理器和后置处理器都是可选的。比如以下中间件用于设置统一的响应内容：

 
 
 
 
    
  
  
  
  
  1. // response 
    2.   
  
  
  
  2. async function respond(ctx, next) { 
    3.   
  
  
  
  3.   await next(); 
    4.   
  
  
  
  4.   if ("/" != ctx.url) return; 
    5.   
  
  
  
  5.   ctx.body = "Hello World"; 
    6.   
  
  
  
  6. } 
    7.

尽管以上介绍的两个中间件都比较简单，但你也可以根据自己的需求来实现复杂的逻辑。Koa 的内核很轻量，麻雀虽小五脏俱全。它通过提供了优雅的中间件机制，让开发者可以灵活地扩展 Web 服务器的功能，这种设计思想值得我们学习与借鉴。

好的，这次就先介绍到这里，后面有机会的话，阿宝哥在单独介绍一下 Redux 或 Express 的中间件机制。

本文题目：如何更好地理解中间件和洋葱模型
链接地址：http://www.shufengxianlan.com/qtweb/news22/238922.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站策划知识

各行业网站

新华建筑装饰　　 　西部信息机房　　 　梅州网站建设　　 　云主机　　 　营销型网站建设　　 　无边发光字制作　　 　新型地坪材料　　 　公司宣传册设计　　 　品牌网站建设　　 　成都营销网站建设　　 　成都搬家公司　　 　成都做网站　　 　外贸网站建设方案　　 　资阳网站建设　　 　宜宾网站设计　　 　成都雨棚定制　　 　兴宏源活动板房　　 　重庆网站设计　　 　ssl数字证书　　 　达州网站建设