AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

实现自己的 简单版 Koa

2022-05-26 215
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实现自己的 简单版 Koa
Express 的下一代基于 Node.js 的 web 框架

  • 特点

    • 轻量无捆绑
    • 中间件架构
    • 优雅的 API 设计
    • 增强的错误处理

  • 安装

    npm i koa -S

Hello Koa

Hello Koa

const Koa = require('koa');

const app = new Koa();

// 日志中间件
app.use(async (ctx, next) => {
  const sT = new Date().getTime();
  console.log(`[${sT}]start: ${ctx.url}`);
  await next(); // 执行下一个中间件
  const eT = new Date().getTime();
  console.log(`[${eT}]end: ${ctx.url} passed ${eT - sT}ms`);
});

app.use(async (ctx, next) => {
  ctx.body = [
    {
      name: 'cell',
      msg: 'hello koa',
    }
  ];
  await next();
});

app.listen(3000);
  • Koa 中间件机制

实现简单 http 服务

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end('hello http server');
});

server.listen(3000, () => {
  console.log('listen at 3000');
});

实现简单 Koa

基础 ToyKoa.js

const ToyKoa = require('./toykoa');

const app = new ToyKoa();

app.use((req, res) => {
  res.writeHead(200);
  res.end('Hello ToyKoa');
});

app.listen(3000, () => {
  console.log('listen at 3000');
});

使用 app.js

const ToyKoa = require('./toykoa');

const app = new ToyKoa();

app.use((req, res) => {
  res.writeHead(200);
  res.end('Hello ToyKoa');
});

app.listen(3000, () => {
  console.log('listen at 3000');
});

context

koa 为了能够简化 API，引入上下文 context，将原始请求对象 req 和 响应对象 res 封装并挂载到 context 上，并且在 context 上设置 getter 和 setter，从而简化操作

  • 封装 request
// request.js
module.exports = {
  get url() {
    return this.req.url;
  },
  get method() {
    return this.req.method.toLowerCase();
  },
};
  • 封装 response
// response.js
module.exports = {
  get body() {
    return this._body;
  },
  set body(val) {
    this._body = val;
  },
}
  • 封装 context
// context.js
module.exports = {
  get url() {
    return this.request.url;
  },
  get body() {
    return this.response.body;
  },
  set body(val) {
    this.response.body = val;
  },
  get method() {
    return this.request.method;
  }
};
  • 创建 context 并挂载 req 和 res
// toykoa.js
const http = require('http');

const context = require('./context');
const request = require('./request');
const response = require('./response');

class ToyKoa {
  listen(...args) {
    const server = http.createServer((req, res) => {
      // 创建上下文
      let ctx = this.createContext(req, res);

      this.cb(ctx);

      // 响应
      res.end(ctx.body);
    });
    server.listen(...args);
  }
  use(cb) {
    this.cb = cb;
  }
  /**
  * 构建上下文
  * @param {*} req 
  * @param {*} res 
  */
  createContext(req, res) {
    const ctx = Object.create(context);
    ctx.request = Object.create(request);
    ctx.response = Object.create(response);

    ctx.req = ctx.request.req = req;
    ctx.res = ctx.response.res = res;

    return ctx;
  }
}

module.exports = ToyKoa;
  • 测试 context
// app.js
const ToyKoa = require('./toykoa');

const app = new ToyKoa();

app.use(ctx => {
  ctx.body = 'Hello toykoa!';
});

app.listen(3000, () => {
  console.log('listen at 3000');
});

中间件

Koa 中间件机制：函数式组合（Compose），将一组需要顺序执行的函数复合为一个函数，外层函数的参数实际是内层函数的返回值，可以通过洋葱模型理解。

const add = (x, y) => x + y;
const square = z => z * z;

const fn = (x, y) => square(add(x, y));
console.log(fn(1, 2)); // 9

// 将上面两次函数的组合调用合成一个函数
const compose = (fn1, fn2) => {
  return (...args) => fn2(fn1(...args));
};
const fn_compose = compose(add, square);
console.log(fn_compose(1, 2)); // 9

// 多个函数组合
const composePlus = (...[first, ...other]) => {
  return (...args) => {
    let ret = first(...args);
    other.forEach(fn => {
      ret = fn(ret);
    });
    return ret;
  };
};

const fn_compose_plus = composePlus(add, square);
console.log(fn_compose_plus(1, 2)); // 9


异步函数组合

function compose(middlewares) {
  return function () {
    return dispatch(0);
    function dispatch(i) {
      let fn = middlewares[i];
      if (!fn) {
        return Promise.resolve();
      }
      return Promise.resolve(
        fn(function next() {
          // promise 完成后，再执行下一个
          return dispatch(i + 1);
        })
      );
    }
  };
}

async function fn1(next) {
  console.log('fn1');
  await next();
  console.log('fn1 end');
}

async function fn2(next) {
  console.log('fn2');
  await delay();
  await next();
  console.log('fn2 end');
}

function fn3(next) {
  console.log('fn3');
}

function delay() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
}

const middlewares = [fn1, fn2, fn3];
const finalFn = compose(middlewares);
finalFn();
// 输出
// fn1
// fn2
// fn3
// fn2 end
// fn1 end

将 compose 应用在 koa 中间件中

// toykoa.js
const http = require('http');

const context = require('./context');
const request = require('./request');
const response = require('./response');

class ToyKoa {
  constructor() {
    // 初始化中间件数组
    this.middlewares = [];
  }
  listen(...args) {
    const server = http.createServer(async (req, res) => {
      // 创建上下文
      const ctx = this.createContext(req, res);

      // 中间件合成
      const fn = this.compose(this.middlewares);

      // 执行合成函数并传入上下文
      await fn(ctx);

      // 响应
      res.end(ctx.body);
    });
    server.listen(...args);
  }
  use(middleware) {
    this.middlewares.push(middleware);
  }
  /**
  * 构建上下文
  * @param {*} req 
  * @param {*} res 
  */
  createContext(req, res) {
    const ctx = Object.create(context);
    ctx.request = Object.create(request);
    ctx.response = Object.create(response);

    ctx.req = ctx.request.req = req;
    ctx.res = ctx.response.res = res;

    return ctx;
  }
  /**
  * 合成函数
  * @param {*} middlewares 
  */
  compose(middlewares) {
    return function(ctx) {
      return dispatch(0);
      function dispatch(i) {
        let fn = middlewares[i];
        if (!fn) {
          return Promise.resolve();
        }
        return Promise.resolve(
          fn(ctx, function next() {
            return dispatch(i + 1);
          })
        );
      }
    };
  }
}

module.exports = ToyKoa;

测试中间件

// app.js
const ToyKoa = require('./toykoa');

const app = new ToyKoa();

// app.use((req, res) => {
//   res.writeHead(200);
//   res.end('Hello ToyKoa');
// });

const delay = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve();
  }, 1000);
});

app.use(async (ctx, next) => {
  ctx.body = '1'
  await next();
  ctx.body += '5';
});

app.use(async (ctx, next) => {
  ctx.body += '2'
  await delay();
  await next();
  ctx.body += '4';
});

app.use(async (ctx, next) => {
  ctx.body += 'Hello toykoa!';
});

app.listen(3000, () => {
  console.log('listen at 3000');
});

返回响应结果为 12Hello toykoa!45

常用 koa 中间件的实现

  • koa 中间件的规范

    • 一个 async 函数
    • 接收 ctx 和 next 两个参数
    • 任务结束需要执行 next
    // 【洋葱状态】：(
const middleware = async (ctx, next) => {
  // 进入当前洋葱 【洋葱状态】：(当前洋葱
  // (当前洋葱(
  next(); // 进入 子洋葱 【洋葱状态】：(当前洋葱(子洋葱
  // 出 子洋葱 【洋葱状态】：(当前洋葱(子洋葱)当前洋葱
}
// 【洋葱状态】：(当前洋葱(子洋葱)当前洋葱)

  • 中间件常见任务

    • 请求拦截
    • 路由
    • 日志
    • 静态文件服务

  • 路由实现

    // router.js
class Router {
  constructor() {
    this.stack = [];
  }

  register(path, methods, middleware) {
    let route = { path, methods, middleware };
    this.stack.push(route);
  }

  get(path, middleware) {
    this.register(path, 'get', middleware);
  }
  post(path, middleware) {
    this.register(path, 'post', middleware);
  }

  routes() {
    let stock = this.stack;
    return async function(ctx, next) {
      let currentPath = ctx.url;
      let route;

      for (let i = 0; i < stock.length; i++) {
        let item = stock[i];
        if (currentPath === item.path && item.methods.indexOf(ctx.method) >= 0) {
          route = item.middleware;
          break;
        }
      }

      if (typeof route === 'function') {
        route(ctx, next);
        return;
      }

      await next();
    };
  }
}

module.exports = Router;

    路由测试

    // app.js
const ToyKoa = require('./toykoa');

const app = new ToyKoa();

const Router = require('./router');
const router = new Router();

router.get('/index', async ctx => { ctx.body = 'get index'; });
router.get('/post', async ctx => { ctx.body = 'get post'; });
router.get('/list', async ctx => { ctx.body = 'get list'; });
router.post('/index', async ctx => { ctx.body = 'post index'; });

// 路由实例输出父中间件 router.routes()
app.use(router.routes());

// ...

app.listen(3000, () => {
  console.log('listen at 3000');
});

  • 静态文件服务 koa-static

    • 配置绝对资源目录地址，默认为 static
    • 获取文件或者目录信息
    • 静态文件读取
    • 返回

    static 实现

    // static.js
const fs = require('fs');
const path = require('path');

module.exports = (dirPath = './public') => {
  return async (ctx, next) => {
    if (ctx.url.indexOf('/public') === 0) {
      const url = path.resolve(__dirname, dirPath);
      const filepath = url + ctx.url.replace('/public', '');
      try {
        const stats = fs.statSync(filepath);
        if (stats.isDirectory()) { // 文件夹
          const dir = fs.readdirSync(filepath);
          const ret = ['<div style="padding-left:20px">'];
          dir.forEach(filename => {
            if (filename.indexOf('.') > -1) {
              ret.push(`
                <p>
                  <a style="color:black" href="${ctx.url}/${filename}">${filename}</a>
                </p>
              `);
            } else {
              ret.push(`
                <p>
                  <a href="${ctx.url}/${filename}">${filename}</a>
                </p>
              `);
            }
          });
          ret.push('</div>');
          ctx.body = ret.join('');
        } else { // 文件
          const content = fs.readFileSync(filepath);
          ctx.body = content;
        }
      } catch (err) {
        ctx.body = '404 not found';
      }
    } else {
      // 不是静态资源忽略
      await next();
    }
  };
};

    添加测试资源
    public/index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles/style.css">
</head>
<body>
  <h1>Hello ToyKoa!</h1>
</body>
</html>

    public/styles/style.css

    body {
  background-color: red;
}

    static 测试

    // app.js
const ToyKoa = require('./toykoa');

const app = new ToyKoa();

const static = require('./static');
app.use(static(__dirname + '/public'));

// ...

app.listen(3000, () => {
  console.log('listen at 3000');
});
文章标签：
JavaScript
API
中间件
1759666346247123
目录
相关文章
游客wkxim4agoo6le
|
存储 缓存 JSON
Flume架构原理详解
笔记
游客wkxim4agoo6le
1688 0
Flume架构原理详解
theMuseCatcher
|
移动开发 JavaScript HTML5
Vue2视频播放（Video）
这篇文章介绍了如何在Vue 3框架中创建一个视频播放组件（Video），支持自定义视频源、封面、自动播放等多种播放选项和样式设置。
theMuseCatcher
797 1
Vue2视频播放（Video）
土木林森
|
物联网 数据管理 Apache
拥抱IoT浪潮，Apache IoTDB如何成为你的智能数据守护者？解锁物联网新纪元的数据管理秘籍！
【8月更文挑战第22天】随着物联网技术的发展，数据量激增对数据库提出新挑战。Apache IoTDB凭借其面向时间序列数据的设计，在IoT领域脱颖而出。相较于传统数据库，IoTDB采用树形数据模型高效管理实时数据，具备轻量级结构与高并发能力，并集成Hadoop/Spark支持复杂分析。在智能城市等场景下，IoTDB能处理如交通流量等数据，为决策提供支持。IoTDB还提供InfluxDB协议适配器简化迁移过程，并支持细致的权限管理确保数据安全。综上所述，IoTDB在IoT数据管理中展现出巨大潜力与竞争力。
土木林森
367 1
阿里云云原生
|
机器学习/深度学习 运维 安全
阿里云 ACK One Serverless Argo 助力深势科技构建高效任务平台
阿里云 ACK One Serverless Argo 助力深势科技构建高效任务平台
阿里云云原生
101748 8
征途黯然。
|
Linux
Linux通过QQ邮箱账号使用mailx发送邮件
Linux通过QQ邮箱账号使用mailx发送邮件
征途黯然。
491 2
丶布布
|
C++
[C++] 提取字符串中的所有数字并组成一个数
[C++] 提取字符串中的所有数字并组成一个数
丶布布
268 0
源码星辰
|
人工智能 小程序 JavaScript
【Java】智慧校园家校互通小程序源码
【Java】智慧校园家校互通小程序源码
源码星辰
265 0
朝阳39
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
朝阳39
648 0
JavaPub
|
Go Windows
golang hello 安装环境异常【已解决】
golang hello 安装环境异常【已解决】
JavaPub
257 1
漏刻有时
|
前端开发 JavaScript 数据库
layui框架实战案例(20)：常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
layui框架实战案例(20)：常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
漏刻有时
817 0

热门文章

最新文章

  • 1
    超简单：mac导出微信聊天记录（附上粉丝群全部聊天记录）
  • 2
    用 Windows Media Center 免费看大片 (一)
  • 3
    数据库必知词汇：即席查询(Ad Hoc)
  • 4
    阿里云推出商标交易平台「商标优选」 商标即买即用
  • 5
    CentOS7使用阿里源安装最新版Docker
  • 6
    Android匿名共享内存（Ashmem）原理
  • 7
    PPC与PC无线连接（Wi-Fi）
  • 8
    Target host or target server ***** is not in operation mode
  • 9
    Tomcat7.0源码分析——请求原理分析（下）
  • 10
    时光老人之2014
  • 1
    《2D横版平台跳跃游戏中角色二段跳失效与碰撞体穿透的耦合性Bug解析》
    31
  • 2
    《Unity3D VR游戏手柄振动与物理碰撞同步失效问题深度解析》
    29
  • 3
    【Azure环境】使用ARM Template部署Policy模板时候报错不支持filed函数: The template function 'field' is not valid.
    27
  • 4
    【含储能及sop的多时段配网优化模型】基于柔性开断点(Soft Open Point)的主动配电网电压与无功功率协调控制方法研究（Matlab代码实现）
    28
  • 5
    【孤岛划分】分布式能源接入弹性配电网模型研究【IEEE33节点】（Matlab代码实现）
    30
  • 6
    阿里云云栖大会2025年9月24日开启，免费申请大会门票，速度领取~
    71
  • 7
    使用阿里云服务器安装Z-Blog博客网站流程，新手一键部署教程
    33
  • 8
    Java 基础练习题及其实现思路，包括输入、条件判断、循环、数组、随机数等常见知识点
    44
  • 9
    Java 数组学习笔记
    20

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    蛋白质语言模型 ProGen：在实验室合成由 AI 预测的蛋白质