const http = require('http')
const serverHandler = (request, response) => {
response.end('Hello World') // 返回数据
}
http
.createServer(serverHandler)
.listen(8888, _ => console.log('Server run as http://127.0.0.1:8888'))

> curl http://127.0.0.1:8888
> curl http://127.0.0.1:8888/sub
> curl -X POST http://127.0.0.1:8888

const serverHandler = (request, response) => {
// default
let responseData = '404'
if (request.url === '/') {
if (request.method === 'GET') {
responseData = 'Hello World'
} else if (request.method === 'POST') {
responseData = 'Hello World With POST'
}
} else if (request.url === '/sub') {
responseData = 'sub page'
}
response.end(responseData) // 返回数据
}

class App {
constructor() {
this.handlers = {}
this.get = this.route.bind(this, 'GET')
this.post = this.route.bind(this, 'POST')
}
route(method, path, handler) {
let pathInfo = (this.handlers[path] = this.handlers[path] || {})
// register handler
pathInfo[method] = handler
}
callback() {
return (request, response) => {
let { url: path, method } = request
this.handlers[path] && this.handlers[path][method]
"htmlcode">

const app = new App()
app.get('/', function (request, response) {
response.end('Hello World')
})
app.post('/', function (request, response) {
response.end('Hello World With POST')
})
app.get('/sub', function (request, response) {
response.end('sub page')
})
http
.createServer(app.callback())
.listen(8888, _ => console.log('Server run as http://127.0.0.1:8888'))


Express中的中间件


这样，就实现了一个代码比较整洁的HttpServer，但功能上依旧是很简陋的。 


如果我们现在有一个需求，要在部分请求的前边添加一些参数的生成，比如一个请求的唯一ID。 


将代码重复编写在我们的handler中肯定是不可取的。 


所以我们要针对route的处理进行优化，使其支持传入多个handler：


route(method, path, ...handler) {
let pathInfo = (this.handlers[path] = this.handlers[path] || {})
// register handler
pathInfo[method] = handler
}
callback() {
return (request, response) => {
let { url: path, method } = request
let handlers = this.handlers[path] && this.handlers[path][method]
if (handlers) {
let context = {}
function next(handlers, index = 0) {
handlers[index] &&
handlers[index].call(context, request, response, () =>
next(handlers, index + 1)
)
}
next(handlers)
} else {
response.end('404')
}
}
}


然后针对上边的路径监听添加其他的handler：


function generatorId(request, response, next) {
this.id = 123
next()
}
app.get('/', generatorId, function(request, response) {
response.end(`Hello World ${this.id}`)
})


这样在访问接口时，就可以看到Hello World 123的字样了。 


这个就可以简单的认为是在Express中实现的 中间件。 


中间件是Express、Koa的核心所在，一切依赖都通过中间件来进行加载。
更灵活的中间件方案-洋葱模型


上述方案的确可以让人很方便的使用一些中间件，在流程控制中调用next()来进入下一个环节，整个流程变得很清晰。 


但是依然存在一些局限性。 


例如如果我们需要进行一些接口的耗时统计，在Express有这么几种可以实现的方案：


function beforeRequest(request, response, next) {
this.requestTime = new Date().valueOf()
next()
}
// 方案1. 修改原handler处理逻辑，进行耗时的统计，然后end发送数据
app.get('/a', beforeRequest, function(request, response) {
// 请求耗时的统计
console.log(
`${request.url} duration: ${new Date().valueOf() - this.requestTime}`
)
response.end('XXX')
})
// 方案2. 将输出数据的逻辑挪到一个后置的中间件中
function afterRequest(request, response, next) {
// 请求耗时的统计
console.log(
`${request.url} duration: ${new Date().valueOf() - this.requestTime}`
)
response.end(this.body)
}
app.get(
'/b',
beforeRequest,
function(request, response, next) {
this.body = 'XXX'
next() // 记得调用，不然中间件在这里就终止了
},
afterRequest
)


无论是哪一种方案，对于原有代码都是一种破坏性的修改，这是不可取的。 


因为Express采用了response.end()的方式来向接口请求方返回数据，调用后即会终止后续代码的执行。 


而且因为当时没有一个很好的方案去等待某个中间件中的异步函数的执行。


function a(_, _, next) {
console.log('before a')
let results = next()
console.log('after a')
}
function b(_, _, next) {
console.log('before b')
setTimeout(_ => {
this.body = 123456
next()
}, 1000)
}
function c(_, response) {
console.log('before c')
response.end(this.body)
}
app.get('/', a, b, c)


就像上述的示例，实际上log的输出顺序为：


before a
before b
after a
before c


这显然不符合我们的预期，所以在Express中获取next()的返回值是没有意义的。
所以就有了Koa带来的洋葱模型，在Koa1.x出现的时间，正好赶上了Node支持了新的语法，Generator函数及Promise的定义。 

所以才有了co这样令人惊叹的库，而当我们的中间件使用了Promise以后，前一个中间件就可以很轻易的在后续代码执行完毕后再处理自己的事情。 


但是，Generator本身的作用并不是用来帮助我们更轻松的使用Promise来做异步流程的控制。 


所以，随着Node7.6版本的发出，支持了async、await语法，社区也推出了Koa2.x，使用async语法替换之前的co+Generator。
Koa也将co从依赖中移除（2.x版本使用koa-convert将Generator函数转换为promise，在3.x版本中将直接不支持Generator） 


由于在功能、使用上Koa的两个版本之间并没有什么区别，最多就是一些语法的调整，所以会直接跳过一些Koa1.x相关的东西，直奔主题。
在Koa中，可以使用如下的方式来定义中间件并使用：


async function log(ctx, next) {
let requestTime = new Date().valueOf()
await next()
console.log(`${ctx.url} duration: ${new Date().valueOf() - requestTime}`)
}
router.get('/', log, ctx => {
// do something...
})


因为一些语法糖的存在，遮盖了代码实际运行的过程，所以，我们使用Promise来还原一下上述代码：


function log() {
return new Promise((resolve, reject) => {
let requestTime = new Date().valueOf()
next().then(_ => {
console.log(`${ctx.url} duration: ${new Date().valueOf() - requestTime}`)
}).then(resolve)
})
}


大致代码是这样的，也就是说，调用next会给我们返回一个Promise对象，而Promise何时会resolve就是Koa内部做的处理。 

可以简单的实现一下（关于上边实现的App类，仅仅需要修改callback即可）：


callback() {
return (request, response) => {
let { url: path, method } = request
let handlers = this.handlers[path] && this.handlers[path][method]
if (handlers) {
let context = { url: request.url }
function next(handlers, index = 0) {
return new Promise((resolve, reject) => {
if (!handlers[index]) return resolve()
handlers[index](context, () => next(handlers, index + 1)).then(
resolve,
reject
)
})
}
next(handlers).then(_ => {
// 结束请求
response.end(context.body || '404')
})
} else {
response.end('404')
}
}
}


每次调用中间件时就监听then，并将当前Promise的resolve与reject处理传入Promise的回调中。 


也就是说，只有当第二个中间件的resolve被调用时，第一个中间件的then回调才会执行。 


这样就实现了一个洋葱模型。
就像我们的log中间件执行的流程：

  
获取当前的时间戳requestTime
  
调用next()执行后续的中间件，并监听其回调
  
第二个中间件里边可能会调用第三个、第四个、第五个，但这都不是log所关心的，log只关心第二个中间件何时resolve，而第二个中间件的resolve则依赖他后边的中间件的resolve。
  
等到第二个中间件resolve，这就意味着后续没有其他的中间件在执行了（全都resolve了），此时log才会继续后续代码的执行

所以就像洋葱一样一层一层的包裹，最外层是最大的，是最先执行的，也是最后执行的。（在一个完整的请求中，next之前最先执行，next之后最后执行）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。