从源码分析express和koa分析区别
在下面分别对express用法和koa用法简单进行简单展示
Express
import express from 'express';
import routes from '../Routes';
import proxy from 'express-http-proxy';
const app = express();
app.use(express.static('public'));
app.use('/api', proxy('http://localhost:4000', {
proxyReqPathResolver: function(req) {
return '/api'+req.url
}
}));
app.use('/', routes)
var server = app.listen(3001, function () {
var host = server.address().address;
var port = server.address().port;
console.log("应用实例，访问地址为 http://%s:%s", host, port);
})
Koa
import koa2 from 'koa2';
import routes from '../Routes';
import proxy from 'koa2-proxy-middleware';
const router = require('koa-router')()
const proxyOptions = {
target: 'http://localhost:4000', //后端服务器地址
changeOrigin: true //处理跨域
};
const app = koa2();
app.use(require('koa-static')(__dirname + '../public'))
//api前缀的请求都走代理
app.use(proxy('/api/*', proxyOptions));
app.use(router.routes())
var server = app.listen(3001, function () {
var host = server.address().address;
var port = server.address().port;
console.log("应用实例，访问地址为 http://%s:%s", host, port);
})
目前可以挂载中间件进去的有：(HTTP Method指代那些http请求方法，诸如Get/Post/Put等等)
- app.use
- app.[HTTP Method]
- app.all
- app.param
- router.all
- router.use
- router.param
- router.[HTTP Method]
express中间件
express代码中依赖于几个变量(实例)：app、router、layer、route
Layer实例是path和handle互相映射的实体，每一个Layer便是一个中间件
++router.use++:使用app.use、router.use来挂载的,
app.use经过一系列处理之后最终也是调用router.use的
router.route:使用app.all、app.[Http Method]、app.route、router.all、router.[Http Method]、router.route来挂载的
router.use 源码分析
// mixin Router class functions
setPrototypeOf(router, proto)
proto.use = function use(fn) {
var offset = 0;
var path = '/';
// default path to '/'
// disambiguate router.use([fn])
if (typeof fn !== 'function') {
var arg = fn;
while (Array.isArray(arg) && arg.length !== 0) {
arg = arg[0];
}
// first arg is the path
if (typeof arg !== 'function') {
offset = 1;
path = fn;
}
}
var callbacks = flatten(slice.call(arguments, offset));
if (callbacks.length === 0) {
throw new TypeError('Router.use() requires a middleware function')
}
for (var i = 0; i < callbacks.length; i++) {
var fn = callbacks[i];
if (typeof fn !== 'function') {
throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))
}
// add the middleware
debug('use %o %s', path, fn.name || '<anonymous>')
var layer = new Layer(path, {
sensitive: this.caseSensitive,
strict: false,
end: false
}, fn);
layer.route = undefined;
this.stack.push(layer);
}
return this;
};
从以上代码可以看出, router.use 就是初始化多个 layer 实例
// setup router
this.lazyrouter();
在启动 router 的时候,调用了 this.lazyrouter() 方法
// lazily adds the base router if it has not yet been added
app.lazyrouter = function lazyrouter() {
if (!this._router) {
this._router = new Router({
caseSensitive: this.enabled('case sensitive routing'),
strict: this.enabled('strict routing')
});
this._router.use(query(this.get('query parser fn')));
this._router.use(middleware.init(this));
}
};
两个系统自带的，看初始化实例图的Layer的名字分别是：query 和 middleware.init, 这两个方法最终调用的也是router.use方法
router.route
proto.route = function route(path) {
var route = new Route(path);
var layer = new Layer(path, {
sensitive: this.caseSensitive,
strict: this.strict,
end: true
}, route.dispatch.bind(route));
layer.route = route;
this.stack.push(layer);
return route;
};
从以上源码中可以看出, new Route 实例化了一个Route, layer.route = route,其他的跟 router.use 差不多 .源码中初始Layer,其中的回调是route.dispatch.bind(route)
function Layer(path, options, fn) {
if (!(this instanceof Layer)) {
return new Layer(path, options, fn);
}
debug('new %o', path)
var opts = options || {};
this.handle = fn;
this.name = fn.name || '<anonymous>';
this.params = undefined;
this.path = undefined;
this.regexp = pathRegexp(path, this.keys = [], opts);
// set fast path flags
this.regexp.fast_star = path === '*'
this.regexp.fast_slash = path === '/' && opts.end === false
}
我们如果使用箭头函数，不存在函数名，打印出来的 layer 的 name 是 anonymous
Route.prototype.all = function all() {
var handles = flatten(slice.call(arguments));
for (var i = 0; i < handles.length; i++) {
var handle = handles[i];
if (typeof handle !== 'function') {
var type = toString.call(handle);
var msg = 'Route.all() requires a callback function but got a ' + type
throw new TypeError(msg);
}
var layer = Layer('/', {}, handle);
layer.method = undefined;
this.methods._all = true;
this.stack.push(layer);
}
return this;
};
新建的route实例，维护的是一个path，对应多个method的handle的映射。每一个method对应的handle都是一个layer，path统一为/
((req, res) => {
……
(async(req, res) => {
……
})(req, res)
})(req, res)
实际上 express 的表现形式大概如此
koa2中间件
当通过 require 去载入 koa 模块时，找到模块下的package.json中的：
"main": "lib/application.js",
最终指向
module.exports = class Application extends Emitter {
}
挂载中间件
/**
* Use the given middleware `fn`.
*
* Old-style middleware will be converted.
*
* @param {Function} fn
* @return {Application} self
* @api public
*/
use(fn) {
if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
if (isGeneratorFunction(fn)) {
deprecate('Support for generators will be removed in v3. ' +
'See the documentation for examples of how to convert old middleware ' +
'https://github.com/koajs/koa/blob/master/docs/migration.md');
fn = convert(fn);
}
debug('use %s', fn._name || fn.name || '-');
this.middleware.push(fn);
return this;
}
以上代码可以看出，首先检查是否是方法，其次判断是否是生成器函数，因为在Koa1.x版本中是通过Generator+Promise+Co实现的，因此将中间件定义成了Generator Function。但自从Koa v2版本起，它的异步控制方案就开始支持Async/Await，因此中间件也用普通函数就可以了
convert：即koa-convert，作用是加入了一层函数嵌套，并使用Co自动执行原Generator函数
最后一段代码的作用是把传入的函数，push到this.middleware属性的尾部，this.middleware是一个数组，用来存储中间件
this.middleware = [];
响应请求
/**
* 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);
}
通过 http.createServer 创建服务，this.callback() 方法中一般会res指定了响应头，响应体内容为node.js，用end结束，我们来继续看下源码。
/**
* Return a request handler callback
* for node's native http server.
*
* @return {Function}
* @api public
*/
callback() {
const fn = compose(this.middleware);
if (!this.listenerCount('error')) this.on('error', this.onerror);
const handleRequest = (req, res) => {
const ctx = this.createContext(req, res);
return this.handleRequest(ctx, fn);
};
return handleRequest;
}
其中ctx是网络请求上下文，我们继续看下this.handleRequest这个方法中有什么？
/**
* Handle request in callback.
*
* @api private
*/
handleRequest(ctx, fnMiddleware) {
const res = ctx.res;
res.statusCode = 404;
const onerror = err => ctx.onerror(err);
const handleResponse = () => respond(ctx);
onFinished(res, onerror);
return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}
这段代码中，主要执行了：
- 错误处理：onerror函数
- onFinished监听response执行完成，以用来做一些资源清理工作。
- 执行传入的fnMiddleware
-最终等待中间件执行完，最终执行handleResponse函数，开始组织响应，代码如下：
/**
* Response helper.
*/
function respond(ctx) {
// allow bypassing koa
if (false === ctx.respond) return;
if (!ctx.writable) return;
const res = ctx.res;
let body = ctx.body;
const code = ctx.status;
// ignore body
if (statuses.empty[code]) {
// strip headers
ctx.body = null;
return res.end();
}
if ('HEAD' == ctx.method) {
if (!res.headersSent && isJSON(body)) {
ctx.length = Buffer.byteLength(JSON.stringify(body));
}
return res.end();
}
// status body
if (null == body) {
if (ctx.req.httpVersionMajor >= 2) {
body = String(code);
} else {
body = ctx.message || String(code);
}
if (!res.headersSent) {
ctx.type = 'text';
ctx.length = Buffer.byteLength(body);
}
return res.end(body);
}
// responses
if (Buffer.isBuffer(body)) return res.end(body);
if ('string' == typeof body) return res.end(body);
if (body instanceof Stream) return body.pipe(res);
// body: json
body = JSON.stringify(body);
if (!res.headersSent) {
ctx.length = Buffer.byteLength(body);
}
res.end(body);
}
刚刚我们似乎漏下了一个主要的方法compose(this.middleware)，它是如何来组织中间件的呢？
const compose = require('koa-compose');
function compose (middleware) {
if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
for (const fn of middleware) {
if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
}
return function (context, next) {
// last called middleware #
let index = -1
return dispatch(0)
function dispatch (i) {
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
index = i
let fn = middleware[i]
if (i === middleware.length) fn = next
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
}
}
在参数中context：是透传的网络对象上下文，next：目前是undefined，后面会说明，它是用来表示所有中间件走完之后，最后执行的一个函数。
首先检查数组类型及数组里每个元素的类型，标识了一个变量index，等下讲dispatch函数的时候会看到它的作用 —— 用于标识「上一次执行到了哪个中间件」
// 校验预期执行的中间件，其索引是否在已经执行的中间件之后
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
执行过了的就不再执行
let fn = middleware[i]
取预期执行的中间件函数
if (i === middleware.length) fn = next
预期执行的中间件索引，已经超出了middleware边界，说明中间件已经全部执行完毕，开始准备执行之前传入的next
if (!fn) return Promise.resolve()
没有fn的话，直接返回一个已经reolved的Promise对象
try {
// 对中间件的执行结果包裹一层Promise.resolve
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
通过递归,对中间件的执行结果包裹一层Promise.resolve,next相当于是上一个中间件对下一个中间件的执行权，调用 next(),执行下一个中间件。
而Promise有个特性，如果Promise.resolve接受的参数，也是个Promise，那么外部的Promise会等待该内部的Promise变成resolved之后，才变成resolved,例如下面的这段代码：
Promise.resolve(new Promise((resolve => {
setTimeout(() => {
console.log('A Resolved');
resolve()
}, 0);
})))
.then(() => { console.log('B Resolved')})
// 先输出：A Resolved
// 后输出：B Resolved
总结
koa2 源码中主要利用闭包和递归的性质，一个个执行，因为每次返回的时候promise.resolve()中的都是Promise对象，然后会去等待方法参数中的Promise执行完then然后再返回，因此如果中间键有await会先执行完异步，按顺序执行；而Express中不是通过promise.resolve()的方式因此无法保证中间件中的await按顺序执行。
