Koa原理和封装

苏莉koa

2019-12-20

Koa源码只有4个js文件

application.js：简单封装http.createServer()并整合context.js
context.js：代理并整合request.js和response.js
request.js：基于原生req封装的更好用
response.js：基于原生res封装的更好用

如果我们要封装一个Koa，
需要实现use加载中间件，
next下一个中间件，并且是环形的，
中间件是promise的

ctx=>对应常用的是 body(可读写)/ url（只读）/ method（只读）

// request.js
const request = {
  get url() {
    return this.req.url;
  },
  set url(val) {
    this.req.url = val;
  }
};

module.exports = request;

// response.js
const response = {
  get body() {
    return this._body;
  },
  set body(data) {
    this._body = data;
  },
  get status() {
    return this.res.statusCode;
  },
  set status(statusCode) {
    if (typeof statusCode !== 'number') {
      throw new Error('statusCode 必须为一个数字');
    }
    this.res.statusCode = statusCode;
  }
};

module.exports = response;

// context.js
const context = {
  get url() {
    return this.request.url;
  },
  set url(val) {
    this.request.url = val;
  },
  get body() {
    return this.response.body;
  },
  set body(data) {
    this.response.body = data;
  },
  get status() {
    return this.response.statusCode;
  },
  set status(statusCode) {
    if (typeof statusCode !== 'number') {
      throw new Error('statusCode 必须为一个数字');
    }
    this.response.statusCode = statusCode;
  }
};
module.exports = context;

const Emitter = require('events');
const http = require('http');

// 引入 context request, response 模块
const context = require('./context');
const request = require('./request');
const response = require('./response');

class Application extends Emitter {
  /* 构造函数 */
  constructor() {
    super();
    this.context = Object.create(context);
    this.request = Object.create(request);
    this.response = Object.create(response);
    // 保存所有的中间件函数
    this.middlewares = [];
  }
  // 开启 http server 并且传入参数 callback
  listen(...args) {
    const server = http.createServer(this.callback());
    return server.listen(...args);
  }
  use(fn) {
    // this.callbackFunc = fn;
    // 把所有的中间件函数存放到数组里面去
    this.middlewares.push(fn);
    return this;
  }
  callback() {
    return (req, res) => {

      // 创建ctx
      const ctx = this.createContext(req, res);
      // 响应内容
      const response = () => this.responseBody(ctx);

      // 响应时 调用error函数
      const onerror = (err) => this.onerror(err, ctx);

      //调用 compose 函数，把所有的函数合并
      const fn = this.compose();
      return fn(ctx).then(response).catch(onerror);
    }
  }
  /**
     监听失败，监听的是上面的catch
   */
  onerror(err) {
    if (!(err instanceof Error)) throw new TypeError(util.format('non-error thrown: %j', err));

    if (404 == err.status || err.expose) return;
    if (this.silent) return;

    const msg = err.stack || err.toString();
    console.error();
    console.error(msg.replace(/^/gm, '  '));
    console.error();
  }
  /*
   构造ctx
   @param {Object} req实列
   @param {Object} res 实列
   @return {Object} ctx实列
  */
  createContext(req, res) {
    // 每个实列都要创建一个ctx对象
    const ctx = Object.create(this.context);
    // 把request和response对象挂载到ctx上去
    ctx.request = Object.create(this.request);
    ctx.response = Object.create(this.response);
    ctx.req = ctx.request.req = req;
    ctx.res = ctx.response.res = res;
    return ctx;
  }
  /*
   响应消息
   @param {Object} ctx 实列
  */
  responseBody(ctx) {
    const content = ctx.body;
    if (typeof content === 'string') {
      ctx.res.setHeader('Content-Type', 'text/pain;charset=utf-8')
      ctx.res.end(content);
    } else if (typeof content === 'object') {
      ctx.res.setHeader('Content-Type', 'text/json;charset=utf-8')
      ctx.res.end(JSON.stringify(content));
    }
  }
  /*
   把传进来的所有的中间件函数合并为一个中间件
   @return {function}
  */
   compose(){
      let middlewares = this.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 = Application;

// 使用
const testKoa = require('./application');
const app = new testKoa();

app.use((ctx) => {
  str += 'hello world'; // 没有声明该变量, 所以直接拼接字符串会报错
  ctx.body = str;
});

app.on('error', (err, ctx) => { // 捕获异常记录错误日志
  console.log(err);
});

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

优化
如果有一个中间件写了两个next，会执行两次，需要通过判断next的总执行次数和中间件的长度，如果不一样，就要报错

环形【洋葱】有什么好处
上面的洋葱圈可能没看懂，上一个简易版的

var arr = [function(next){
   console.log(1)
   next()
   console.log(2)
},function(next){
   console.log(3)
   next()
   console.log(4)
}]
var i = 0;
function init(){
   arr[i](function(){
    i++
    if(arr[i]){
       init()
    }
   })
}
init()
// 1342

为什么是1342
上面的代码打个断点就知道了

// 这样应该看得懂吧
function(){
   console.log(1)
   var next = function(){
      console.log(3)
      var next = ...
      console.log(4)
   }
   next()
   console.log(2)
}

在以前不是express设计的框架，整个请求到响应结束是链结构的，一个修改响应的插件就需要放到最后面，但是有个环形的设计，只要把要修改响应的代码写到next执行后就行了，对于开发者也是，获取请求的数据，修改请求的数据，next，查数据库，响应body

文件访问中间件

module.exports = (dirPath = "./public") => {
    return async (ctx, next) => {
        if (ctx.url.indexOf("/public") === 0) {
            // public开头 读取文件
            const url = path.resolve(__dirname, dirPath);
            const fileBaseName = path.basename(url);
            const filepath = url + ctx.url.replace("/public", ""); 
                console.log(filepath);
            // console.log(ctx.url,url, filepath, fileBaseName) 
            try {
                stats = fs.statSync(filepath);
                if (stats.isDirectory()) {
                    const dir = fs.readdirSync(filepath);
                    const ret = ['<div style="padding-left:20px">'];
                    dir.forEach(filename => {
                        console.log(filename);
                        // 简单认为不带小数点的格式，就是文件夹，实际应该用statSync 
                        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 {
                    console.log("文件");
                    const content = fs.readFileSync(filepath);
                    ctx.body = content;
                }
            } catch (e) {
                // 报错了 文件不存在
                ctx.body = "404, not found";
            }
        } else {
            // 否则不是静态资源，直接去下一个中间件
            await next();
        }
    }
}

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

路由中间件

class Router {
    constructor() {
        this.stack = [];
    }
    // 每次定义一个路由，都注册一次
    register(path, methods, middleware) {
        let route = { path, methods, middleware }
        this.stack.push(route);
    }
    // 现在只支持get和post，其他的同理 
    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) {
                    // 判断path和method
                    route = item.middleware; break;
                }
            }
            if (typeof route === 'function') {
                route(ctx, next);
                return;
            }
            await next();
        };
    }
}

module.exports = Router;

// 使用
const Koa = require('Koa')
const Router = require('./router')
const app = new Koa()
const router = new Router();
router.get('/index', async ctx => { ctx.body = 'index page'; });
router.get('/post', async ctx => { ctx.body = 'post page'; });
router.get('/list', async ctx => { ctx.body = 'list page'; });
router.post('/index', async ctx => { ctx.body = 'post page'; });
// 路由实例输出父中间件 
app.use(router.routes());