WHAT - Koa 介绍（含洋葱模型）

最新推荐文章于 2024-05-21 19:09:41 发布
最新推荐文章于 2024-05-21 19:09:41 发布
阅读量1.1k 收藏 26
点赞数 20
文章标签： javascript 前端框架 前端 web node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58540586/article/details/138371993
版权

一、Koa 框架

Koa 是一个 Node.js 的 Web 框架，由 Express 团队设计并创建。它基于 ES6 的 Generator 实现了一种更加现代化的异步编程方式，使得编写异步代码更加简单和优雅。Koa 的设计理念是非常轻量和模块化的，它只提供了一个基础的 HTTP 服务器框架，其他功能需要通过中间件来实现，因此可以根据项目需求选择性地添加中间件。

Koa 2 是 Koa 框架的下一个主要版本，它基于 ES2017 的 async/await 特性重写了 Koa，并采用了更加现代化的 JavaScript 语法和编程模型。Koa 2 在基本功能上与 Koa 1 相似，但是使用 async/await 语法可以更加清晰和简洁地处理异步代码。此外，Koa 2 还修复了一些 Koa 1 中的问题，并添加了一些新的功能和改进。

总的来说，Koa 框架提供了一种优雅的方式来构建基于 Node.js 的 Web 应用程序，并且在异步编程方面具有很高的灵活性和可扩展性。Koa 2 则是 Koa 框架的升级版本，使用了更加现代化的语法和特性，提供了更好的开发体验和性能。

二、Koa 中间件：Middleware

Koa 中间件，是构建 Koa 应用程序的关键组成部分。Koa 中的中间件函数与 Express.js 中的类似，它们拦截传入的请求，执行某些操作，然后可选择将请求传递给堆栈中的下一个中间件。

一些常见的 Koa 中间件包括：

  1. koa-router：Koa 的路由中间件，允许您定义路由及其关联的处理程序。

  2. koa-bodyparser：用于解析请求主体的中间件，通常用于处理表单提交或 JSON 负载。

  3. koa-static：用于提供静态文件（如 HTML、CSS 和 JavaScript）的中间件。

  4. koa-session：用于管理用户会话的中间件。

  5. koa-logger：用于记录 HTTP 请求的中间件。

  6. koa-compress：用于压缩 HTTP 响应以减少带宽使用的中间件。

这只是一些示例，还有许多其他插件可根据特定项目需求扩展 Koa 的功能。此外，Koa 还允许您编写定制的中间件，以满足应用程序的特定需求。

三、构建 Web 应用

下面我们将展示如何使用 Koa 和一些常见的中间件来构建一个简单的 web 程序。我们将创建一个简单的服务器，该服务器会监听端口并响应 HTTP 请求。

首先，确保你已经在项目中安装了 Koa 及其他所需的中间件。你可以使用 npm 进行安装：

npm install koa koa-router koa-bodyparser koa-static koa-session koa-logger koa-compress

接下来，创建一个名为 app.js 的文件，编写以下代码：

// 引入 Koa 框架及所需中间件
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const static = require('koa-static');
const session = require('koa-session');
const logger = require('koa-logger');
const compress = require('koa-compress');

// 创建 Koa 应用程序
const app = new Koa();
const router = new Router();

// 使用中间件
app.use(logger()); // 使用日志记录中间件
app.use(compress()); // 使用压缩中间件
app.use(bodyParser()); // 使用请求体解析中间件
app.use(session(app)); // 使用会话中间件

// 配置静态文件服务
app.use(static(__dirname + '/public'));

// 定义路由
router.get('/', async (ctx) => {
  ctx.body = 'Hello, World!'; // 返回一个简单的欢迎消息
});

router.post('/login', async (ctx) => {
  const { username, password } = ctx.request.body;
  // 在实际应用中，这里应该验证用户的登录信息，这里只是简单地演示
  if (username === 'user' && password === 'password') {
    ctx.session.authenticated = true; // 设置用户已经通过身份验证
    ctx.body = 'Login successful!';
  } else {
    ctx.status = 401;
    ctx.body = 'Invalid username or password';
  }
});

router.get('/logout', async (ctx) => {
  ctx.session.authenticated = false; // 设置用户未通过身份验证
  ctx.body = 'Logout successful!';
});

// 将路由注册到应用程序
app.use(router.routes()).use(router.allowedMethods());

// 启动服务器，监听端口
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

在这个示例中，我们创建了一个 Koa 应用程序，使用了以下中间件：

  • koa-router：处理路由。
  • koa-bodyparser：解析请求主体，以便在 POST 请求中获取表单数据。
  • koa-static：提供静态文件服务。
  • koa-session：管理用户会话。
  • koa-logger：记录 HTTP 请求。
  • koa-compress：压缩 HTTP 响应。

我们定义了几个简单的路由来处理不同的 HTTP 请求：GET / 用于显示欢迎消息，POST /login 用于处理用户登录，GET /logout 用于处理用户注销。

最后，我们启动了服务器，并监听端口。你可以在命令行中运行 node app.js 来启动这个应用程序。

四、洋葱模型：Onion Model

1. 介绍

Koa 框架的洋葱模型（Onion Model）是指中间件的执行顺序和原理，它类似于洋葱的结构，请求（request）从外向内穿过多个中间件，然后响应（response）从内向外返回，每个中间件都有机会在请求和响应之间执行自己的逻辑。

下图很清晰的描绘了一个请求是如何经过中间件最后生成响应的：

请添加图片描述

在 Koa 中，每个中间件都是一个异步函数，接受两个参数：context（上下文对象，简称 ctx）和 next 函数。ctx 包含了当前请求和响应的所有信息，而 next 函数用于将控制权转移给下一个中间件。在洋葱模型中，当一个中间件调用 next() 时，控制权会传递给下一个中间件，然后在响应返回时，控制权会沿着相同的路径返回，直到回到最初的中间件。

在前面我们编写如下代码：

app.use(logger()); // 使用日志记录中间件
app.use(compress()); // 使用压缩中间件
app.use(bodyParser()); // 使用请求体解析中间件
app.use(session(app)); // 使用会话中间件

在 Koa 中，中间件按照它们定义的顺序依次执行，每个中间件都有机会修改请求和响应对象，或者中断中间件链。所以，日志记录中间件会首先执行，然后是压缩中间件，然后是请求体解析中间件，最后是会话中间件。这个顺序确保了每个中间件都有机会处理请求，并将其传递给堆栈中的下一个中间件。

下面是一个简单的自定义中间件函数执行示例，演示了 Koa 框架中洋葱模型的工作原理：

const Koa = require('koa');
const app = new Koa();
app.use(async (ctx, next) => {
    console.log('Middleware 1 - Before');
    await next();
    console.log('Middleware 1 - After');
});
app.use(async (ctx, next) => {
    console.log('Middleware 2 - Before');
    await next();
    console.log('Middleware 2 - After');
});
app.use(async (ctx, next) => {
    console.log('Middleware 3 - Before');
    await next();
    console.log('Middleware 3 - After');
    ctx.body = 'Hello, Koa!';
});
app.listen(3000);

执行顺序应该是：

// middleware1 - before
// middleware2 - before
// middleware3 - before
// middleware3 - after
// middleware2 - after
// middleware1 - after

2. 原理

Koa2 中的洋葱模型底层具体实现可以简单描述为 Koa 使用了类似于 Generator 或 Async/Await 的异步函数特性来实现洋葱模型。当一个请求到达时，Koa 将请求对象和响应对象传递给第一个中间件，然后等待该中间件执行完成。在中间件执行的过程中，通过 await next()（对于 Async/Await）或者 yield next（对于 Generator）来传递控制权给下一个中间件。这样就形成了一个中间件链，每个中间件都会在调用下一个中间件之前或之后执行一些操作。

当最内层的中间件执行完成后，控制权会逐层向外传递回去，直到最外层的中间件。这种逐层返回的过程中，每个中间件都有机会在响应返回之前或之后进行一些操作，例如修改请求、响应对象，记录日志，设置 HTTP 头等。

这种设计模式的优点是灵活性和可扩展性。开发人员可以根据需要添加、删除或重新排列中间件，而不需要修改整个应用程序的逻辑。同时，中间件链的执行顺序也非常清晰，使得程序的逻辑更加可读和可维护。

最后我们通过分析源码来学习一下：

当调用 app.listen() 时：

//node_modules/koa/lib/application.js
const http = require('http');
  /**
   * Shorthand for:
   *
   *    http.createServer(app.callback()).listen(...)
   *
   * @param {Mixed} ...
   * @return {Server}
   * @api public
   */

  listen(...args) {
    debug('listen');
    const server = http.createServer(this.callback());
    return server.listen(...args);
  }

这里传入了一个 this.callback()，callback 函数具体实现：

//node_modules/koa/lib/application.js
const compose = require('koa-compose');
  /**
   * Return a request handler callback
   * for node's native http server.
   *
   * @return {Function}
   * @api public
   */
  constructor(options) {
	this.middleware = [];
  }

  callback() {
    const fn = compose(this.middleware); // 关键

    if (!this.listenerCount('error')) this.on('error', this.onerror);

    const handleRequest = (req, res) => {
      const ctx = this.createContext(req, res);
      if (!this.ctxStorage) {
        return this.handleRequest(ctx, fn);
      }
      return this.ctxStorage.run(ctx, async() => {
        return await this.handleRequest(ctx, fn);
      });
    };

    return handleRequest;
  }

重点学习 compose(this.middleware) 具体实现：

//node_modules/koa-compose/index.js
/**
 * Compose `middleware` returning
 * a fully valid middleware comprised
 * of all those which are passed.
 *
 * @param {Array} middleware
 * @return {Function}
 * @api public
 */

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

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

这段代码用于组合多个中间件函数成为一个整体的中间件函数。这个函数在 Koa 中的使用非常广泛，它负责了 Koa 洋葱模型的实现。

首先，函数接受一个 middleware 参数，它是一个由多个中间件函数组成的数组。返回一个新的函数，这个函数接受两个参数：context 和 next。

在新函数主体部分，声明了一个变量 index，用于记录当前执行到的中间件在 middleware 数组中的索引，默认值为 -1。初始执行 return dispatch(0)，表示从第一个中间件开始。

dispatch 函数是递归调用的核心部分，它接受一个参数 i，表示当前执行到的中间件在 middleware 数组中的索引。在内部，首先会检查当前索引 i 是否小于等于之前执行过的中间件的索引 index，如果是，则说明 next() 被调用了多次，需要抛出错误。

正常情况下，首先 index 会被更新为当前的索引 i，表示该中间件这次被调用过了，接着根据当前索引 i 获取对应的中间件函数 fn，如果当前索引已经等于 middleware 数组的长度，说明已经执行完了所有的中间件，此时需要将 fn 设为参数中的 next 函数。如果 fn 不存在（比如当 i===middware.lenght 后的下一次递归调用，即 i === middleware.length+1），则表示已经执行完所有的中间件，可以直接返回一个解决状态的 Promise。

如果 fn 存在，表示还有中间件需要处理，则尝试调用 fn 函数，传入 context 和一个新的 dispatch 函数作为参数，如果 fn 函数执行成功，将返回一个解决状态的 Promise，即 return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));。

学习完 const fn = compose(this.middleware);，继续：

  callback() {
    const fn = compose(this.middleware); // 关键

    if (!this.listenerCount('error')) this.on('error', this.onerror);

    const handleRequest = (req, res) => {
      const ctx = this.createContext(req, res);
      if (!this.ctxStorage) {
        return this.handleRequest(ctx, fn);
      }
      return this.ctxStorage.run(ctx, async() => {
        return await this.handleRequest(ctx, fn);
      });
    };

    return handleRequest;
  }

通过 compose 我们得到了一个 fn 函数，即中间件链，在 handleRequest 里，我们首先调用 this.createContext(req, res) 方法来创建一个 Koa 上下文对象 ctx，该对象包含了请求和响应的相关信息，以便后续中间件处理。

接着检查是否启用了 this.ctxStorage，这是 Koa 中用于存储上下文对象的容器。如果没有启用，直接调用 this.handleRequest(ctx, fn) 来处理请求，即将中间件链 fn 作为 handleRequest 回调。如果启用了，则调用 this.ctxStorage.run(ctx, async() => {...}) 方法，这个方法用于在当前上下文中运行一个异步函数。在这里，我们将 this.handleRequest(ctx, fn) 包装在一个异步函数中，以确保在处理请求时能够正确地传递上下文对象。

ctxStorage 具体作用？
在传统的同步代码中，每个 HTTP 请求都会在一个线程中完成，因此可以直接通过作用域链来访问和修改请求的上下文。但在异步代码中，由于回调函数可能在不同的事件循环中执行，因此无法直接访问到调用时的上下文。Koa 通过使用 ctxStorage 来解决这个问题，当启用了 ctxStorage 时，每个请求都会创建一个独立的上下文对象，并将其存储在 ctxStorage 中。这样，无论在哪个事件循环中执行回调函数，都可以通过 ctxStorage 来获取到对应的上下文对象。总的来说，ctxStorage 提供了一种机制来管理上下文对象，在异步代码中确保正确地传递和访问上下文，从而简化了异步操作中的上下文管理。

回归代码，this.handleRequest(ctx, fn); 实现了将组合后的中间件链 fn 作为回调传递给 handleRequest，并基于同一个 ctx。

这就是洋葱模型的底层实现逻辑了。

@PHARAOH
关注
  • 20
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
11-koa2洋葱圈模型.md
03-31
大厂前端面试|# 开始 前端工程师有很多，而是技能全面、独当一面的前端工程师到哪里都是“香饽饽”，企业争抢。所以，技术广度将决定你的稀缺性，以及未来的发展空间。本章将通过多个面试题，讲解前端面试常考的...
Koa源码笔记
惊蛰小鱼的博客
05-21 436
Koa是基于Node.js的web框架，利用它可以很快搭建起一个http服务。本来是要利用它验证下http协议中某些细节问题，但是发现源码不多，就顺带看了下。 Koa作为一个第三方模块，对外仅暴露了 Application和HttpError。 我们仅讨论Application（HttpError实际为第三方模块，用于给Koa添加自定义的http错误处理方法）。 Application是一个class可看做Koa自身，先看下Koa实例上有哪些方法： 上面的这些方法除了inspect和toJSON这两个.
koa 学习笔记
weixin_43069018的博客
07-21 754
koa 是什么 Koa 是一个新的web 框架，由Express 幕后的原班人马打造， 致力于成为web 应用和API 开发领域中的一个更小、更富有表现力、更健壮的基石 洋葱模型 const Koa = require('koa') // 类名一般要大写 const app = new Koa() // 实例化 /* * node 进程 如果没有重启的话 做得修改是没有用的 * */ app....
Koa封装的ctx对象具体详解
03-11 8648
koa2和promise、async-await密切相关，如果对promise、async-await还不是很清楚的同学可以参考小睿的这篇文章 一、框架目录 koa/ | | - context.js | | - request.js | | - response.js | ·- application.js 二、介绍 首先我们通过Koa包导入的是一个类（Express中是...
Koa：核心探秘与入坑指北
weixin_33806509的博客
04-16 106
框架目录 初识 ctx use与中间件 ctx.body 请求体 static 关于错误捕获 获取demo代码 pre-notify 给最近的koa2学习做个小结，主要分为使用的注意事项以及源码实现两个部分，感觉写得有点啰嗦，以后有空再修正吧~ koa2和promise、async-await密切相关，但碍于篇幅这里并没有对promise部分详细介绍，如果对promise、async-awai...
restrict-ip-koa-middleware
05-18
restrict-ip-koa-middleware 用途 这个中间件用来限制来访者的 IP 地址，起到类似防火墙的作用。 功能 白名单通过策略：只有白名单内的 IP 允许访问 黑名单拦截策略：只有黑名单内的 IP 不允许访问 内网地址通过：与...
awilix-koa：用于Koa 2的Awilix helpersmiddleware
02-03
Awilix-Koa 适用于Koa的Awilix帮助器，路由器和作用域实例化中间件。 :koala: 目录 安装 npm install --save awilix-koa 需要Node v6或更高版本 基本用法 将中间件添加到您的Koa应用程序。 const { asClass , ...
lin-cms-koa：由koa实现的简单实用的CMS
02-03
lin-cms-koa 以koa实现的lin-cms后台部分，支持javasript和typescript双语言版本 提示 lin-cms-koa目前仅作为个人项目进行开发，强烈不建议使用实际项目 已经移到了官方仓库，请查看 lin-cms的 开始 请确保您拥有...
inversify-koa-utils：inversify-koa-utils是基于inversify-express-utils的模块。 该模块具有使用装饰器和IoC依赖注入（带有inverseify）的koa 2应用程序开发实用程序。
02-03
inversify-koa-utils inversify-koa-utils是基于的模块。 该模块具有使用装饰器和IoC依赖注入（带有inverseify）的koa 2应用程序开发实用程序。 安装 您可以使用npm安装inversify-koa-utils ： $ npm install ...
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 115
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 196
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 756
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 855
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
Vue从入门到实战Day07
最新发布
ltt159264的博客
05-21 582
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
jQuery知识点（二）
shsjssnn的博客
05-21 464
1.获取节点： 通过各种选择器或选择器的组合来获取想要的网页元素。 2.创建节点： 元素节点通过工厂函数$()直接创建，文本节点和属性节点可以随着元素节点创建时一起创建，也可以通过先创建元素节点，再使用操作内容和属性的方法产生。 3.插入节点： append()、prepend(): 是父元素的方法 appendTo()、prependTo(): 是要插入的节点的方法 before()、after(): 是要插入
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 679
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
详细解释下什么是koa的洋葱圈模型
03-24
Koa的洋葱圈模型指的是一种中间件机制，它的执行顺序类似于一个洋葱圈，从外到内再从内到外，每一层都可以对请求进行修改、拦截或增强，直到最内层执行完毕，再按相反顺序回到最外层，将结果返回给客户端。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值