前言

  • 找到koa源码的package.json文件，找到”main”: “lib/application.js”,此时我们调用的Koa的类就是在application.js中的
  • application主要做的事情就是实例化应用，
  • context主要做的事情就是实例上下文，
  • request.js由原生request事件的http.IncomingMessage类过滤而来；
  • response.js对应ctx.response,由原生request事件的http.ServerResponse类过滤而来。

里面的Application类实现了koa的各个方法

处理中间件

  • 我们调用中间件的时候传入的callback，callback循环被组合的中间件，递归调用中间件 ```javascript /**

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

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

  1. if (!this.listenerCount('error')) this.on('error', this.onerror);
  3. const handleRequest = (req, res) => {
  4.   const ctx = this.createContext(req, res);
  5.   return this.handleRequest(ctx, fn);
  6. };
  8. return handleRequest;

}

  1. <a name="f7n8H"></a>
  2. #### context->ctx别名处理
  4. - koa内部使用的是proto.__defineSetter__和proto.__defineGetter__ [__defineGetter__（mdn已废弃）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__)
  5. - 也可以使用Object.defineProperty
  6. ```javascript
  7. const context = {
  8.     // get method() {
  9.     //     return this.request.method
  10.     // },
  12.     // get url(){
  13.     //   return this.request.url
  14.     // }
  15. }
  17. defineProperty('request', 'method')
  18. defineProperty('request', 'url')
  19. defineProperty('request', 'body')
  21. function defineProperty(target, name) {
  22.     // context.__defineGetter__(name, function () {
  23.     //     return this[target][name]
  24.     // })
  25.     Object.defineProperty(context, name, {
  26.         get() {
  27.             return this[target][name]
  28.         },
  29.         set(value) {
  30.             this[target][name] = value
  31.         }
  32.     })
  33. }
  34. module.exports = context

简单的实现

application.js

  • 洋葱结构，当初为什么要这样设计呢？因为是为了解决复杂应用中频繁的回调而设计的级联代码，它并不会把控制权完全交给一个中间件的代码，而是碰到next就会去下一个中间件，等下面所有中间件执行完成后，就会再回来执行中间件未完成的代码。

    为什么要返回promise呢

  • 所以Promise.resolve的作用， 在普通函数中依旧能使用next().then()的形式，保证中间件的正确运行

  • 如果所有的中间件都为普通函数并且没有异步，洋葱模型的实现与调用栈有关，

由于async，await的特性，所有的中间件都使用async/await 也可以保持异步的情况下保持洋葱模型,
此时都可以使用compose-sync 达到与compose-async同样的效果
但当要在普通函数中实现异步保持洋葱模型，则需要compose-async 返回promise, 以达到与async/await 同样的效果。

  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.         // 保存用户添加的中间件函数
  9.         this.middleware = []
  10.         // 为了方便实用，直接添加到application实例上
  11.         // 如果有多个实例共享的时候，数据容易受到污染
  12.         this.context = Object.create(context)
  13.         this.request = Object.create(request)
  14.         this.response = Object.create(response)
  15.     }
  16.     listen(...args) {
  17.         // 把相关逻辑抽离出去
  18.         const server = http.createServer(this.callback())
  19.         server.listen(...args)
  20.     }
  22.     // 当调用use的时候，调用的处理函数（中间件），往middleware中push中间件
  23.     use(fn) {
  24.         this.middleware.push(fn)
  25.     }
  27.     // 异步递归遍历调用中间件处理函数 next
  28.     compose(middleware) {
  29.         return function (context) {
  30.             const dispatch = index => {
  31.                 // next就是dispatch，处理index边界问题
  32.                 // 整个返回的都是promise，所以在超出边界的时候也要返回promise.resolve成功的状态
  33.                 if (index >= middleware.length) return Promise.resolve()
  34.                 const fn = middleware[index]
  35.                 // 把fn强制的包装到一个promise里面
  36.                 return Promise.resolve(
  37.                     // 上下文对象
  38.                     fn(context, () => dispatch(index + 1)) // 这是next函数
  39.                 )
  40.             }
  41.             // 返回第一个中间件处理函数
  42.             // dispatch不是一数组。是一个函数，调用dispatch
  43.             return dispatch(0)
  44.         }
  45.     }
  47.     // 创建上下文对象的函数
  48.     // 构造上文对象
  49.     createContext(req, res) {
  50.         // 一个实例会处理多个请求，而不同的请求应该拥有不同的上下文对象，为了避免请求期间的数据交叉污染
  51.         // 所以这里又对数据做了一份新的拷贝
  52.         const context = Object.create(this.context);
  53.         const request = context.request = Object.create(this.request);
  54.         const response = context.response = Object.create(this.response);
  55.         context.app = request.app = response.app = this;
  56.         context.req = request.req = response.req = req;
  57.         context.res = request.res = response.res = res;
  58.         request.ctx = response.ctx = context;
  59.         request.response = response;
  60.         response.request = request;
  61.         console.log(req);
  62.         context.originalUrl = request.originalUrl = req.url;
  63.         context.state = {};
  64.         return context;
  65.     }
  67.     callback() {
  68.         // compose进行递归遍历,把当前存储中间件函数的数组存储进来
  69.         // 扩展性更好，middleware可以通过参数传进来
  70.         const fnMiddleware = this.compose(this.middleware)
  71.         const handleRequest = (req, res) => {
  72.             // 最终对应的结果
  73.             // 每个请求都会创建一个独立的context对象，他们之间不会互相污染
  74.             const context = this.createContext()
  75.             fnMiddleware(context).then(() => {
  76.                 // console.log('end');
  77.                 res.end(context.body)
  78.                 // res.end('My Koa')
  79.             }).catch(err => {
  80.                 res.end(err.message)
  81.             })
  82.         }
  83.         return handleRequest
  84.     }
  85. }
  87. 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('request', '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.         },
  23.         set(value) {
  24.             this[target][name] = value
  25.         }
  26.     })
  27. }
  28. module.exports = context

response

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

request

  1. const url = require('url')
  2. const request = {
  3.     // 对象属性访问器
  4.     get method() {
  5.         console.log(this);
  6.         return this.req.method
  7.     },
  9.     get header() {
  10.         return this.req.headers
  11.     },
  13.     get url() {
  14.         return this.req.url
  15.     },
  17.     get path() {
  18.         return url.parse(this.req.url).pathname
  19.     },
  21.     get query() {
  22.         return url.parse(this.req.url, true).query
  23.     }
  24. }
  25. module.exports = request

推荐大佬文章

若川大佬详解koa源码