koa和koa-router的使用及源码实现

转x33g5p2x  于2021-09-19 转载在 其他  
字(9.4k)|赞(0)|评价(0)|浏览(628)

1. 前言

鉴于之前使用express和koa的经验，最近想尝试构建出一个koa精简版，利用最少的代码实现koa和koa-router，同时也梳理一下Node.js网络框架开发的核心内容。

实现的源代码将会放在文末，配有详细的注释。

2. 核心设计

2.1 API调用

在mini-koa的API设计中，参考koa和koa-router的API调用方式。

Node.js的网络框架封装其实并不复杂，其核心点在于http/https的createServer方法上，这个方法是http请求的入口。

首先，我们先回顾一下用Node.js来启动一个简单服务。

  1. const http = require('http')
  2. const app = http.createServer((request, response) => {
  3.   response.end('hello Node.js')
  4. })
  5. app.listen(3333, () => {
  6.   console.log('App is listening at port 3333...')
  7. })

2.2 路由原理

既然我们知道Node.js的请求入口在createServer方法上，那么我们可以在这个方法中找出请求的地址，然后根据地址映射出监听函数(通过get/post等方法添加的路由函数)即可。

其中，路由列表的格式设计如下：

  1. // binding的格式
  2. {
  3. '/': [fn1, fn2, ...],
  4. '/user': [fn, ...],
  5. ...
  6. }
  7. // fn/fn1/fn2的格式
  8. {
  9.   method: 'get/post/use/all',
  10.   fn: '路由处理函数'
  11. }

3. 难点分析

3.1 next()方法设计

我们知道在koa中是可以添加多个url监听函数的，其中决定是否传递到下一个监听函数的关键在于是否调用了next()函数。如果调用了next()函数则先把路由权转移到下一个监听函数中，处理完毕再返回当前路由函数。

在mini-koa中，我把next()方法设计成了一个返回Promise fullfilled的函数(这里简单设计，不考虑next()传参的情况)，用户如果调用了该函数，那么就可以根据它的值来决定是否转移路由函数处理权。

判断是否转移路由函数处理权的代码如下：

  1. let isNext = false
  2. const next = () => {
  3.   isNext = true
  4.   return Promise.resolve()
  5. }
  6. await router.fn(ctx, next)
  7. if (isNext) {
  8.   continue
  9. } else {
  10.   // 没有调用next，直接中止请求处理函数
  11.   return
  12. }

3.2 use()方法设计

mini-koa提供use方法，可供扩展日志记录/session/cookie处理等功能。

use方法执行的原理是根据请求地址在执行特定路由函数之前先执行mini-koa调用use监听的函数。

所以这里的关键点在于怎么找出use监听的函数列表，假设现有监听情况如下：

  1. app.use('/', fn1)
  2. app.use('/user', fn2)

如果访问的url是/user/add，那么fn1和fn2都必须要依次执行。

我采取的做法是先根据/字符来分割请求url，然后循环拼接，查看路由绑定列表(binding)中有没有要use的函数，如果发现有，添加进要use的函数列表中，没有则继续下一次循环。

详细代码如下：

  1. // 默认use函数前缀
  2. let prefix = '/'
  3. // 要预先调用的use函数列表
  4. let useFnList = []
  6. // 分割url，使用use函数
  7. // 比如item为/user/a/b映射成[('user', 'a', 'b')]
  8. const filterUrl = url.split('/').filter(item => item !== '')
  9. // 该reduce的作用是找出本请求要use的函数列表
  10. filterUrl.reduce((cal, item) => {
  11.   prefix = cal
  12.   if (this.binding[prefix] && this.binding[prefix].length) {
  13.     const filters = this.binding[prefix].filter(router => {
  14.       return router.method === 'use'
  15.     })
  16.     useFnList.push(...filters)
  17.   }
  18.   return (
  19.     '/' +
  20.     [cal, item]
  21.       .join('/')
  22.       .split('/')
  23.       .filter(item => item !== '')
  24.       .join('/')
  25.   )
  26. }, prefix)

3.3 ctx.body响应

通过ctx.body = '响应内容'的方式可以响应http请求。它的实现原理是利用了ES6的Object.defineProperty函数，通过设置它的setter/getter函数来达到数据追踪的目的。

详细代码如下：

  1. // 追踪ctx.body赋值
  2. Object.defineProperty(ctx, 'body', {
  3.   set(val) {
  4.     // set()里面的this是ctx
  5.     response.end(val)
  6.   },
  7.   get() {
  8.     throw new Error(`ctx.body can't read, only support assign value.`)
  9.   }
  10. })

3.4 子路由mini-koa-router设计

子路由mini-koa-router设计这个比较简单，每个子路由维护一个路由监听列表，然后通过调用mini-koa的addRoutes函数添加到主路由列表上。

mini-koa的addRoutes实现如下：

  1. addRoutes(router) {
  2.   if (!this.binding[router.prefix]) {
  3.     this.binding[router.prefix] = []
  4.   }
  5.   // 路由拷贝
  6.   Object.keys(router.binding).forEach(url => {
  7.     if (!this.binding[url]) {
  8.       this.binding[url] = []
  9.     }
  10.     this.binding[url].push(...router.binding[url])
  11.   })
  12. }

4. 用法

使用示例如下：

  1. // examples_server.js
  2. const { Koa, KoaRouter } = require('../index')
  3. const app = new Koa()
  4. // 路由用法
  5. const userRouter = new KoaRouter({
  6.   prefix: '/user'
  7. })
  9. // 中间件函数
  10. app.use(async (ctx, next) => {
  11.   console.log(`请求url, 请求method: `, ctx.req.url, ctx.req.method)
  12.   await next()
  13. })
  15. // 方法示例
  16. app.get('/get', async ctx => {
  17.   ctx.body = 'hello ,app get'
  18. })
  20. app.post('/post', async ctx => {
  21.   ctx.body = 'hello ,app post'
  22. })
  24. app.all('/all', async ctx => {
  25.   ctx.body = 'hello ,/all 支持所有方法'
  26. })
  28. // 子路由使用示例
  29. userRouter.post('/login', async ctx => {
  30.   ctx.body = 'user login success'
  31. })
  33. userRouter.get('/logout', async ctx => {
  34.   ctx.body = 'user logout success'
  35. })
  37. userRouter.get('/:id', async ctx => {
  38.   ctx.body = '用户id： ' + ctx.params.id
  39. })
  41. // 添加路由
  42. app.addRoutes(userRouter)
  44. // 监听端口
  45. app.listen(3000, () => {
  46.   console.log('> App is listening at port 3000...')
  47. })

5. 总结

本次实现的精简版mini-koa，虽然跟常用的koa框架有很大区别，但是也实现了最基本的API调用和原理。

造轮子是一件难能可贵的事，程序员在学习过程中不应该一直崇尚拿来主义，学习到一定程度后，在自己的个人项目中，可以秉持能造就造的态度，去尝试理解和挖掘源码背后的原理和思想。

当然，通常来说，自己造的轮子本身不具备多大的实用性，没有经历过社区大量的测试和实际应用场景的打磨，但是能加深自己的理解和提高自己的能力也是一件值得坚持的事。

附录：源代码

mini-koa-router.js:

  1. /** * koa-router精简版 * @author Mask */
  2. class KoaRouter {
  3.   /** * 构造函数 * @param {object} props 路由参数配置 */
  4.   constructor(props) {
  5.     // 路由前缀
  6.     this.prefix = props.prefix || '/'
  7.     // 路由监听列表
  8.     this.binding = {}
  9.   }
  11.   /** * * @param {string} method 请求方法 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  12.   request(method, url, callback) {
  13.     if (typeof url === 'function') {
  14.       // 简单判断没有传入url
  15.       callback = url
  16.       url = '/'
  17.     }
  19.     if (this.prefix) {
  20.       // 添加路由实例有前缀
  21.       url =
  22.         '/' +
  23.         [this.prefix, url]
  24.           .join('/')
  25.           .split('/')
  26.           .filter(item => item)
  27.           .join('/')
  28.     }
  30.     if (!this.binding[url]) {
  31.       this.binding[url] = []
  32.     }
  34.     this.binding[url].push({
  35.       method: method,
  36.       fn: callback
  37.     })
  38.   }
  40.   /** * 中间件函数，可用作日志记录等等 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  41.   use(url, callback) {
  42.     this.request('use', url, callback)
  43.   }
  45.   /** * 监听所有的请求方法，包括get/post等等 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  46.   all(url, callback) {
  47.     this.request('all', url, callback)
  48.   }
  50.   /** * 监听get请求 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  51.   get(url, callback) {
  52.     this.request('get', url, callback)
  53.   }
  55.   /** * 监听post请求 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  56.   post(url, callback) {
  57.     this.request('post', url, callback)
  58.   }
  59. }
  61. module.exports = KoaRouter

mini-koa.js:

  1. const http = require('http')
  3. /** * 解析url的查询参数，比如/a?name=123&pwd=456 解析成 {name: 123, pwd: 456} * @param {string} url 请求路径 */
  4. const parseUrlParams = url => {
  5.   const query = {}
  6.   const index = url.indexOf('?')
  7.   if (index < 0) {
  8.     return query
  9.   }
  10.   url = url.substring(index + 1)
  11.   url.split('&').forEach(function(item) {
  12.     let obj = item.split('=')
  13.     query[obj[0]] = obj[1] || undefined
  14.   })
  15.   return query
  16. }
  18. /** * Koa精简版 * @author Mask */
  19. class Koa {
  20.   /** * 构造函数 */
  21.   constructor() {
  22.     // 路由监听列表
  23.     this.binding = {}
  24.     // 监听实例
  25.     this.httpApp = null
  26.     // 初始化
  27.     this.init()
  28.   }
  30.   /** * 初始化 */
  31.   init() {
  32.     // 这里要绑定this，不然requestServer里面的this是Server实例
  33.     this.httpApp = http.createServer(this._requestServer.bind(this))
  34.   }
  36.   /** * http请求函数 * @param {*} request * @param {*} response */
  37.   async _requestServer(request, response) {
  38.     // 本次请求的环境
  39.     const ctx = {}
  40.     request.query = {}
  41.     request.params = {}
  42.     ctx.req = request
  43.     ctx.request = request
  44.     ctx.res = response
  45.     ctx.response = response
  46.     ctx.query = request.query
  47.     ctx.params = request.params
  49.     // 设置一些默认响应头
  50.     response.statusCode = 200
  51.     response.setHeader('Content-Type', 'text/plain;charset=utf-8')
  52.     response.setHeader('Access-Control-Allow-Origin', '*')
  53.     response.setHeader(
  54.       'Access-Control-Allow-Methods',
  55.       'PUT,POST,GET,DELETE,OPTIONS'
  56.     )
  58.     // 追踪ctx.body赋值
  59.     Object.defineProperty(ctx, 'body', {
  60.       set(val) {
  61.         // set()里面的this是ctx
  62.         response.end(val)
  63.       },
  64.       get() {
  65.         throw new Error(`ctx.body can't read, only support assign value.`)
  66.       }
  67.     })
  69.     // 解析url,获取查询参数，类似/a?name=123&pwd=456
  70.     const method = request.method
  71.     const rawUrl = request.url
  72.     const resUrl = rawUrl.match(/(\/[^?&=]*)/i)
  73.     let url = rawUrl
  74.     if (resUrl) {
  75.       url = resUrl[1]
  76.     }
  77.     // 解析参数，需要重新指向ctx.query，不然追踪会断掉
  78.     request.query = parseUrlParams(rawUrl)
  79.     ctx.query = request.query
  81.     // 默认use函数前缀
  82.     let prefix = '/'
  83.     // 要预先调用的use函数列表
  84.     let useFnList = []
  86.     // 分割url，使用use函数
  87.     // 比如item为/user/a/b映射成[('user', 'a', 'b')]
  88.     const filterUrl = url.split('/').filter(item => item !== '')
  89.     // 该reduce的作用是找出本请求要use的函数列表
  90.     filterUrl.reduce((cal, item) => {
  91.       prefix = cal
  92.       if (this.binding[prefix] && this.binding[prefix].length) {
  93.         const filters = this.binding[prefix].filter(router => {
  94.           return router.method === 'use'
  95.         })
  96.         useFnList.push(...filters)
  97.       }
  98.       return (
  99.         '/' +
  100.         [cal, item]
  101.           .join('/')
  102.           .split('/')
  103.           .filter(item => item !== '')
  104.           .join('/')
  105.       )
  106.     }, prefix)
  108.     // 1 调用use函数列表，可以做日志记录等等
  109.     if (useFnList.length) {
  110.       for (let i = 0, length = useFnList.length; i < length; i++) {
  111.         let router = useFnList[i]
  112.         let isNext = false
  113.         const next = () => {
  114.           isNext = true
  115.           return Promise.resolve()
  116.         }
  117.         await router.fn(ctx, next)
  118.         if (isNext) {
  119.           continue
  120.         } else {
  121.           // 没有调用next，直接中止请求处理函数
  122.           return
  123.         }
  124.       }
  125.     }
  127.     // 2 遍历特定的路由监听函数
  128.     const routerList = []
  130.     // 2.1 添加具体匹配路由函数
  131.     if (this.binding[url] && this.binding[url].length) {
  132.       routerList.push(...this.binding[url])
  133.     }
  135.     // 2.2 添加模糊路由监听函数，比如请求的url为'/post/123'，可以映射到'/post/:id'监听上
  136.     let bindingUrlList = Object.keys(this.binding).map(item => {
  137.       // 比如item为/user/a/b映射成['user', 'a', 'b']
  138.       return item.split('/').filter(i => i !== '')
  139.     })
  141.     // 模糊判断，过滤路由参数长度不同的项
  142.     bindingUrlList = bindingUrlList.filter(item => {
  143.       return item.length === filterUrl.length
  144.     })
  146.     // 具体过滤，存在的路由监听函数是否匹配
  147.     filterUrl.forEach((key, index) => {
  148.       bindingUrlList = bindingUrlList.filter(item => {
  149.         if (item[index].startsWith(':')) {
  150.           // 这一项参数是查询参数（类似:id），挂载到request.params上
  151.           let variableName = item[index].replace(':', '')
  152.           request.params[variableName] = key
  153.           return true
  154.         } else if (item[index] === key) {
  155.           // 值相等，不是查询参数
  156.           return true
  157.         } else {
  158.           // 只有长度一致
  159.           return false
  160.         }
  161.       })
  162.     })
  164.     // 根据过滤后的模糊路由来添加路由监听函数
  165.     bindingUrlList.forEach(item => {
  166.       let url = '/' + item.join('/')
  167.       if (this.binding[url] && this.binding[url].length) {
  168.         routerList.push(...this.binding[url])
  169.       }
  170.       routerList.push(...this.binding[url])
  171.     })
  173.     // 3 执行匹配路由
  174.     if (routerList.length) {
  175.       // 执行
  176.       for (let i = 0, length = routerList.length; i < length; i++) {
  177.         let router = routerList[i]
  178.         if (router.method === method.toLowerCase() || router.method === 'all') {
  179.           // 新的ctx
  180.           let isNext = false
  181.           const next = () => {
  182.             isNext = true
  183.             return Promise.resolve()
  184.           }
  185.           await router.fn(ctx, next)
  187.           // 如果调用了next，则传递到下一个
  188.           if (isNext) {
  189.             continue
  190.           } else {
  191.             // 没有调用next，直接中止请求处理函数
  192.             return
  193.           }
  194.         }
  195.       }
  196.       // 函数没有中断，不支持的方法
  197.       response.statusCode = 404
  198.       ctx.body = `不支持的方法 - ${method}`
  199.     } else {
  200.       // 没有监听
  201.       response.statusCode = 404
  202.       ctx.body = `${url}不存在`
  203.     }
  204.   }
  206.   /** * * @param {string} method 请求方法 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  207.   request(method, url, callback) {
  208.     if (typeof url === 'function') {
  209.       // 简单判断没有传入url
  210.       callback = url
  211.       url = '/'
  212.     }
  214.     if (!this.binding[url]) {
  215.       this.binding[url] = []
  216.     }
  218.     this.binding[url].push({
  219.       method: method,
  220.       fn: callback
  221.     })
  222.   }
  224.   /** * 中间件函数，可用作日志记录等等 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  225.   use(url, callback) {
  226.     this.request('use', url, callback)
  227.   }
  229.   /** * 监听所有的请求方法，包括get/post等等 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  230.   all(url, callback) {
  231.     this.request('all', url, callback)
  232.   }
  234.   /** * 监听get请求 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  235.   get(url, callback) {
  236.     this.request('get', url, callback)
  237.   }
  239.   /** * 监听post请求 * @param {string} url 请求的路由 * @param {function} callback 请求回调函数 */
  240.   post(url, callback) {
  241.     this.request('post', url, callback)
  242.   }
  244.   /** * 监听端口 * @param {...any} args */
  245.   listen(...args) {
  246.     this.httpApp.listen(...args)
  247.   }
  249.   /** * 添加子路由 * @param {MoaRouter} router */
  250.   addRoutes(router) {
  251.     if (!this.binding[router.prefix]) {
  252.       this.binding[router.prefix] = []
  253.     }
  254.     // 路由拷贝
  255.     Object.keys(router.binding).forEach(url => {
  256.       if (!this.binding[url]) {
  257.         this.binding[url] = []
  258.       }
  259.       this.binding[url].push(...router.binding[url])
  260.     })
  261.   }
  262. }
  264. module.exports = Koa

作者：mask.qi

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/vipshop_fin_dev/article/details/119741391

内容来源于网络，如有侵权，请联系作者删除！

JavaScriptnode.jsJs软件开发

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com