零、Koa 源码目录结构

  1. .
  2. ├── History.md
  3. ├── LICENSE
  4. ├── Readme.md
  5. ├── dist
  6. │   └── koa.mjs
  7. ├── lib
  8. │   ├── application.js  # 最核心的模块
  9. │   ├── context.js # 上下文对象
  10. │   ├── request.js # Koa 自己实现的请求对象
  11. │   └── response.js # Koa 自己实现的响应对象
  12. └── package.json

一、基本结构

使用：

  1. const Koa = require('./koa')
  3. const app = new Koa()
  5. app.listen(3000)

application.js

  1. module.exports = class Application {
  2.   listen(...args) {
  3.     const server = http.createServer((req, res) => {
  4.       res.end('My Koa')
  5.     })
  6.     return server.listen(...args)
  7.   }
  8. }

二、实现中间件功能

  • Koa 会把所有中间件组合成一个大的 Promise
  • 当这个 Promise 执行完毕之后，会采用当前的 ctx.body 进行结果响应
  • next 前面必须有 await 或者 return next，否则执行顺序达不到预期
  • 如果都是同步执行，加不加 await 都无所谓
  • 我不知道后续是否有异步逻辑，所以建议写的时候都加上 await next

收集中间件

使用方式：

  1. const Koa = require('./koa')
  3. const app = new Koa()
  5. app.use((ctx, next) => {
  6.   ctx.body = 'foo'
  7. })
  9. app.use((ctx, next) => {
  10.   ctx.body = 'Koa'
  11. })
  13. app.listen(3000)

application.js

  1. const http = require('http')
  3. module.exports = class Application {
  4.   constructor () {
  5.     this.middleware = []
  6.   }
  8.   use(fn) {
  9.     if (typeof fn !== 'function')
  10.       throw new TypeError('middleware must be a function!')
  11.     this.middleware.push(fn)
  12.   }
  14.   listen(...args) {
  15.     const server = http.createServer((req, res) => {
  16.       res.end('My Koa')
  17.     })
  18.     return server.listen(...args)
  19.   }
  20. }

调用中间件

  1. const http = require('http')
  3. module.exports = class Application {
  4.   constructor() {
  5.     this.middleware = [] // 存储用户所有的中间件处理函数
  6.   }
  8.   use(fn) {
  9.     this.middleware.push(fn)
  10.   }
  12.   listen(...args) {
  13.     const server = http.createServer(this.callback())
  14.     return server.listen(...args)
  15.   }
  17.   compose(middleware) {
  18.     return function () { // 可以配置额外参数
  19.       const dispatch = i => {
  20.         if (i >= middleware.length) return Promise.resolve()
  21.         const fn = middleware[i]
  22.         return Promise.resolve(
  23.           fn({}, () => dispatch(i + 1))
  24.         )
  25.       }
  26.       return dispatch(0)
  27.     }
  28.   }
  30.   callback() {
  31.     const fnMiddleware = this.compose(this.middleware)
  32.     const handleRequest = (req, res) => {
  33.       fnMiddleware()
  34.         .then(() => {
  35.           // 处理结束
  36.           res.end('end')
  37.         })
  38.         .catch(err => {
  39.           // 发生异常
  40.           res.end('error')
  41.         })
  42.     }
  43.     return handleRequest
  44.   }
  45. }

三、处理上下文对象

初始化上下文对象

context 上下文对象的使用方式：

  1. /**
  2.  * Koa Context
  3.  */
  6. const Koa = require('./koa')
  8. const app = new Koa()
  10. // Koa Context 将 node 的 request 和 response 对象封装到单个对象中，为编写 Web 应用程序和 API 提供了许多有用的方法。
  11. // 每个请求都将创建一个 Context，并在中间件中作为参数引用
  12. app.use((ctx, next) => {
  13.   console.log(ctx) // Context 对象
  15.   console.log(ctx.req) // Node 的 request 对象
  16.   console.log(ctx.res) // Node 的 response 对象
  18.   console.log(ctx.request) // Koa 中封装的请求对象
  19.   console.log(ctx.request.header) // 获取请求头对象
  20.   console.log(ctx.request.method) // 获取请求方法
  21.   console.log(ctx.request.url) // 获取请求路径
  22.   console.log(ctx.request.path) // 获取不包含查询字符串的请求路径
  23.   console.log(ctx.request.query) // 获取请求路径中的查询字符串
  25.   // Request 别名
  26.   // 完整列表参见：https://koa.bootcss.com/#request-
  27.   console.log(ctx.header)
  28.   console.log(ctx.method)
  29.   console.log(ctx.url)
  30.   console.log(ctx.path)
  31.   console.log(ctx.query)
  34.   // Koa 中封装的响应对象
  35.   console.log(ctx.response)
  37.   // Response 别名
  38.   ctx.status = 200
  39.   ctx.message = 'Success'
  40.   ctx.type = 'plain'
  41.   ctx.body = 'Hello Koa'
  43. })
  45. app.listen(3000)

context.js

  1. const context = {
  2.   // get method () {
  3.   //   return this.request.method
  4.   // },
  6.   // get url () {
  7.   //   return this.request.url
  8.   // }
  9. }
  11. defineProperty('request', 'method')
  12. defineProperty('request', 'url')
  14. function defineProperty (target, name) {
  15.   context.__defineGetter__(name, function () {
  16.     return this[target][name]
  17.   })
  18.   // Object.defineProperty(context, name, {
  19.   //   get () {
  20.   //     return this[target][name]
  21.   //   }
  22.   // })
  23. }
  25. module.exports = context

request.js

  1. const url = require('url')
  3. const request = {
  4.   get url () {
  5.     return this.req.url
  6.   },
  8.   get path () {
  9.     return url.parse(this.req.url).pathname
  10.   },
  12.   get query () {
  13.     return url.parse(this.req.url, true).query
  14.   },
  16.   get method () {
  17.     return this.req.method
  18.   }
  19. }
  21. module.exports = request

response.js

  1. const response = {
  2.   set status (value) {
  3.     this.res.statusCode = value
  4.   }
  5. }
  7. module.exports = response
  8. zz

application.js

  1. const http = require('http')
  2. const context = require('./context')
  3. const request = require('./request')
  4. const response = require('./response')
  6. class Application {
  7.   constructor() {
  8.     this.middleware = [] // 保存用户添加的中间件函数
  10.     // 为了防止多个实例共享 Request、Response、Context 导致数据被意外修改，这里重新拷贝一份
  11.     this.request = Object.create(request)
  12.     this.response = Object.create(response)
  13.     this.context = Object.create(context)
  14.   }
  16.   listen(...args) {
  17.     const server = http.createServer(this.callback())
  18.     server.listen(...args)
  19.   }
  21.   use(fn) {
  22.     this.middleware.push(fn)
  23.   }
  25.   // 异步递归遍历调用中间件处理函数
  26.   compose(middleware) {
  27.     return function (context) {
  28.       const dispatch = index => {
  29.         if (index >= middleware.length) return Promise.resolve()
  30.         const fn = middleware[index]
  31.         return Promise.resolve(
  32.           // TODO: 上下文对象
  33.           fn(context, () => dispatch(index + 1)) // 这是 next 函数
  34.         )
  35.       }
  37.       // 返回第 1 个中间件处理函数
  38.       return dispatch(0)
  39.     }
  40.   }
  42.   createContext(req, res) {
  43.     // 为了避免请求之间 context 数据交叉污染，这里为每个请求单独创建 context 请求对象
  44.     const context = Object.create(this.context)
  45.     const request = Object.create(this.request)
  46.     const response = Object.create(this.response)
  48.     context.app = request.app = response.app = this
  49.     context.req = request.req = response.req = req // 原生的请求对象
  50.     context.res = request.res = response.res = res // 原生的响应对象
  51.     request.ctx = response.ctx = context // 在 Request 和 Response 中也可以拿到 context 上下文对象
  52.     request.response = response // Request 中也可以拿到 Response
  53.     response.request = request // Response 中也可以拿到 Request
  54.     context.originalUrl = request.originalUrl = req.url // 没有经过任何处理的请求路径
  55.     context.state = {} // 初始化 state 数据对象，用于给模板视图提供数据
  57.     return context
  58.   }
  60.   callback() {
  61.     const fnMiddleware = this.compose(this.middleware)
  62.     const handleRequest = (req, res) => {
  63.       // 1、创建上下文请求对象
  64.       const context = this.createContext(req, res)
  66.       // 2、传入上下文对象执行中间件栈
  67.       fnMiddleware(context)
  68.         .then(() => {
  69.           console.log('end')
  70.           res.end('My Koa')
  71.         })
  72.         .catch(err => {
  73.           res.end(err.message)
  74.         })
  75.     }
  77.     return handleRequest
  78.   }
  79. }
  81. module.exports = Application

处理上下文对象中的别名

四、处理 ctx.body

application.js

  1. const http = require('http')
  2. const { Stream } = require('stream')
  3. const context = require('./context')
  4. const request = require('./request')
  5. const { body } = require('./response')
  6. const response = require('./response')
  8. class Application {
  9.   constructor() {
  10.     this.middleware = [] // 保存用户添加的中间件函数
  12.     this.context = Object.create(context)
  13.     this.request = Object.create(request)
  14.     this.response = Object.create(response)
  15.   }
  17.   listen(...args) {
  18.     const server = http.createServer(this.callback())
  19.     server.listen(...args)
  20.   }
  22.   use(fn) {
  23.     this.middleware.push(fn)
  24.   }
  26.   // 异步递归遍历调用中间件处理函数
  27.   compose(middleware) {
  28.     return function (context) {
  29.       const dispatch = index => {
  30.         if (index >= middleware.length) return Promise.resolve()
  31.         const fn = middleware[index]
  32.         return Promise.resolve(
  33.           // TODO: 上下文对象
  34.           fn(context, () => dispatch(index + 1)) // 这是 next 函数
  35.         )
  36.       }
  38.       // 返回第 1 个中间件处理函数
  39.       return dispatch(0)
  40.     }
  41.   }
  43.   // 构造上下文对象
  44.   createContext(req, res) {
  45.     // 一个实例会处理多个请求，而不同的请求应该拥有不同的上下文对象，为了避免请求期间的数据交叉污染，所以这里又对这个数据做了一份儿新的拷贝
  46.     const context = Object.create(this.context)
  47.     const request = (context.request = Object.create(this.request))
  48.     const response = (context.response = Object.create(this.response))
  50.     context.app = request.app = response.app = this
  51.     context.req = request.req = response.req = req
  52.     context.res = request.res = response.res = res
  53.     request.ctx = response.ctx = context
  54.     request.response = response
  55.     response.request = request
  56.     context.originalUrl = request.originalUrl = req.url
  57.     context.state = {}
  58.     return context
  59.   }
  61.   callback() {
  62.     const fnMiddleware = this.compose(this.middleware)
  63.     const handleRequest = (req, res) => {
  64.       // 每个请求都会创建一个独立的 Context 上下文对象，它们之间不会互相污染
  65.       const context = this.createContext(req, res)
  66.       fnMiddleware(context)
  67.         .then(() => {
  68.           respond(context)
  69.           // res.end(context.body)
  70.           // res.end('My Koa')
  71.         })
  72.         .catch(err => {
  73.           res.end(err.message)
  74.         })
  75.     }
  77.     return handleRequest
  78.   }
  79. }
  81. function respond (ctx) {
  82.   const body = ctx.body
  83.   const res = ctx.res
  85.   if (body === null) {
  86.     res.statusCode = 204
  87.     return res.end()
  88.   }
  90.   if (typeof body === 'string') return res.end(body)
  91.   if (Buffer.isBuffer(body)) return res.end(body)
  92.   if (body instanceof Stream) return body.pipe(ctx.res)
  93.   if (typeof body === 'number') return res.end(body + '')
  94.   if (typeof body === 'object') {
  95.     const jsonStr = JSON.stringify(body)
  96.     return res.end(jsonStr)
  97.   }
  98. }
  100. module.exports = Application

context

  1. const context = {
  2.   // get method () {
  3.   //   return this.request.method
  4.   // },
  6.   // get url () {
  7.   //   return this.request.url
  8.   // }
  9. }
  11. defineProperty('request', 'method')
  12. defineProperty('request', 'url')
  13. defineProperty('response', 'body')
  15. function defineProperty (target, name) {
  16.   // context.__defineGetter__(name, function () {
  17.   //   return this[target][name]
  18.   // })
  19.   Object.defineProperty(context, name, {
  20.     get () {
  21.       return this[target][name]
  22.     },
  24.     set (value) {
  25.       this[target][name] = value
  26.     }
  27.   })
  28. }
  30. module.exports = context

reponse.js

  1. const response = {
  2.   set status (value) {
  3.     this.res.statusCode = value
  4.   },
  6.   _body: '', // 真正用来存数据的
  8.   get body () {
  9.     return this._body
  10.   },
  12.   set body (value) {
  13.     this._body = value
  14.   }
  15. }
  17. module.exports = response