node基础复习

node api 三种调用方式

  1. // 1.一般 node调用api使用的是callback方式
  2. fun('./index1.js', (err, data) => {
  3.   console.log(err ? 'read err' : data)
  4. })
  5. // 模拟实现
  6. function fun(arg, callback) {
  7.   try {
  8.     aaa() // 执行一些内部操作
  9.     callback(null, 'result') // 如果执行成功，err设置为null, 结果通过第二参数返回
  10.   } catch(e) {
  11.     callback(e)
  12.   }
  13. }
  15. // 通过 promisify 改造后的fun函数
  16. const { promisify } = require('util')
  17. const promisefun = promisify(fun)
  19. // 2.promise方式调用
  20. promisefun('./index1.js').then((data) => {
  21.   console.log(data)
  22. }, (err) => {
  23.   // 如果后面有.catch 这里的优先级会高一点
  24.   console.log(err)
  25. })
  26. // 或者
  27. promisefun('./index1.js').then((data) => {
  28.   console.log(data)
  29. }).catch(err => {
  30.   console.log('read err')
  31. })
  33. // 3.通过async/await 调用promise函数
  34. // await 需要用 async 函数包裹
  35. setTimeout(async () => {
  36.   try {
  37.     let data = await promisefun('./index1.js')
  38.     console.log(data)
  39.   } catch(e) {
  40.     console.log('read err')
  41.   }
  42. }, 0)

util模块内置 promisify 实现

promisify 可以把老的callback方式，转换为promise函数，怎么实现的呢？

  1. // 普通callback方式
  2. function fun(arg, callback) {
  3.   try {
  4.     aaa() // 执行一些内部操作
  5.     callback(null, 'result', 'result2') // 如果执行成功，err设置为null, 结果通过第二参数返回
  6.   } catch(e) {
  7.     callback(e)
  8.   }
  9. }
  11. // promisify模拟实现
  12. function promisify(fun) {
  13.   // 生成的函数，会接收一个参数arg，数据和错误，需要我们在promise内部用reject或resolve传出结果
  14.   return function(...args) {
  15.     // 将传入的参数保存到args数组
  16.     return new Promise((resolve, reject) => {
  17.       // 将callback函数push到参数数组里，再间接调用fun
  18.       args.push((err, result) => {
  19.         // 如果fun函数执行成功会执行该函数并传入 (null, result)
  20.         // 如果fun函数执行错误会执行该函数并传入 (err)
  21.         // resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。 spec上就是这样规定。
  22.         // 如果回调函数，传出了多个参数，可以将该函数result换为 ...result
  23.         // 然后resove时判断下，如果 result数组长度为0 直接resolve(result[0])，否则resove(result数组)，接收参数时需要注意
  24.         err ? reject(err) : resolve(result)
  25.       })
  26.       fun.apply(null, args)
  27.     })
  28.   }
  29. }
  31. // 测试
  32. let promisefun = promisify(fun)
  33. promisefun('./index1.js').then((data) => {
  34.   console.log(data)
  35. }, (err) => {
  36.   // 如果后面有.catch 这里的优先级会高一点
  37.   console.log('read err')
  38. })

Koa

Koa是由 Express 原班人马打造的致力于成为一个更小、更富有表现力、更健壮的 web 开发框架。

官方解释：Expressive middleware for node.js using ES2017 async functions

github: koajs/koa

特点

中间件机制、请求、响应处理

  • 轻量、无捆绑
  • 中间件构架
  • 优雅的API设计
  • 增强的错误处理

Koa1与Koa2的区别

Koa1使用generate，yield next方式执行promise异步操作，而Koa开始，使用aysnc/await来处理异步

node的不足

  • 令人困惑的req和res
    • res.end()
    • res.writeHeader、res.setHeader
  • 描述复杂业务逻辑时不够优雅
    • 流程描述：比如a账号扣钱、b账号加钱
    • 切面描述(AOP) 比如鉴权、日志、加判断在某个时间开始打折促销，axios里的拦截。AOP实现分为语言级、框架级
  1. // 利用fs，渲染静态html、JSON字符串返回
  2. const http = require('http')
  3. const fs = require('fs')
  5. const server = http.createServer((req, res)=> {
  6.   const { url, method } = req
  7.   console.log('url, method: ', url, method)
  9.   if (url === '/' && method === 'GET') {
  10.     fs.readFile('index.html', (err, data) => {
  11.       if (err) throw err
  12.       res.statusCode = 200
  13.       res.setHeader('Content-Type', 'text/html')
  14.       res.end(data)
  15.     })
  16.   } else if (url === '/users' && method === 'GET') {
  17.     res.writeHead(200, {
  18.       'Content-Type': 'application/json'
  19.     })
  20.     res.end(JSON.stringify({
  21.       name: 'guoqzuo'
  22.     }))
  23.   }
  24. })
  26. server.listen(3003)

koa优雅处理http

运行下面的代码，访问http://127.0.0.1 就可以看到 {name: ‘Tom’} 内容

  1. // 需要先 npm install koa --save
  2. const Koa = require('koa')
  3. const app = new Koa()
  5. app.use((ctx, next) => {
  6.   ctx.body = {
  7.     name: 'Tom'
  8.   }
  9. })
  11. app.listen(3000)

ctx与next

下面的例子访问 http://127.0.0.1 为 {name: ‘Tom’}，访问 http://127.0.0.1/html 内容为 ‘你的名字是Tom’

  1. const Koa = require('koa')
  2. const app = new Koa()
  4. app.use((ctx, next) => {
  5.   ctx.body = {
  6.     name: 'Tom'
  7.   }
  8.   next() // 执行下一个中间件
  9. })
  11. app.use((ctx, next) => {
  12.   console.log(ctx.url)
  13.   if (ctx.url === '/html') {
  14.     ctx.body = `你的名字是${ctx.body.name}`
  15.   }
  16. })
  18. app.listen(3000)

await next()

  1. const Koa = require('koa')
  2. const app = new Koa()
  4. // 也会被请求 /favicon.ico
  6. app.use(async (ctx, next) => {
  7.   // log日志
  8.   let dateS = +(new Date())
  10.   await next() // 先去处理后面的中间件，都处理完后再向下执行
  12.   let dateE = +(new Date())
  13.   console.log(`请求耗时${dateE - dateS}ms`)
  14. })
  16. app.use((ctx, next) => {
  17.   ctx.body = {
  18.     name: 'Tom'
  19.   }
  20.   next()
  21. })
  23. app.use((ctx, next) => {
  24.   console.log(ctx.url)
  25.   if (ctx.url === '/html') {
  26.     ctx.body = `你的名字是${ctx.body.name}`
  27.   }
  28. })
  30. app.listen(3000)

Koa原理

node与koa开启http服务方法

  1. // node http服务
  2. const http = require('http')
  3. const server = http.createServer(() => {
  4.   res.writeHead(200)
  5.   res.end('hello')
  6. })
  7. server.llsten(3000, () => {
  8.   console.log('监听端口3000')
  9. })
  11. // koa http服务
  12. const Koa = require('koa')
  13. const app = new Koa()
  14. app.use((ctx, next) => {
  15.   ctx.body = {
  16.     name: 'Tom'
  17.   }
  18. })
  19. app.listen(3000)

创建mykoa.js来模拟实现koa

先写好使用demo

  1. const MyKoa = require('./myKoa')
  2. const app = new MyKoa()
  4. // koa调用
  5. // app.use((ctx, next) => {
  6. //   ctx.body = {
  7. //     name: 'Tom'
  8. //   }
  9. // })
  11. // 先暂时简单点
  12. app.use((req, res) => {
  13.   console.log('执行了app.use')
  14.   res.end('hello')
  15. })
  17. app.listen(3000, (err, data) => {
  18.   console.log('监听端口3000')
  19. })

myKoa.js实现

  1. // myKoa.js
  2. const http = require('http')
  4. class MyKoa {
  5.   // app.use 调用 app.use(callback)
  6.   use(callback) {
  7.     this.callback = callback
  8.   }
  10.   listen(...args) {
  11.     console.log(args)
  12.     const server = http.createServer((req, res) => {
  13.       this.callback(req, res)
  14.     })
  15.     server.listen(...args)
  16.   }
  17. }
  19. module.exports = MyKoa

简化API：ctx参数(context)

一般app.use回调函数参数为 ctx和next，这里的ctx是context上下文的简写，主要是为了简化API而引入的。将原始请求对象req和响应对象res封装并挂载到context上，并在context上设置getter和setter属性，从而简化操作

getter和setter作用

  1. echarts中对于对象层级很深的属性，options.a.b.c，可以直接创建一个getter，这样写-法更优雅
  2. vue2.0双向绑定
  1. // 更近一步 将app.use((req, res) => {}) => app.use(ctx => {})
  2. app.use(ctx => {
  3.   ctx.body = 'hello'
  4. })

先看看koa源码 koa -response源码

response最核心的一个方法是 set body方法，ctx.body 默认接收是json数据，如果传入了buffer、string、流都会有相应的处理

封装request、response、context

  1. // demo app.js
  2. const MyKoa = require('./myKoa')
  3. const app = new MyKoa()
  5. app.use((ctx) => {
  6.   // console.log(ctx)
  7.   ctx.body = 'hello'
  8. })
  10. app.listen(3000, (err, data) => {
  11.   console.log('监听端口3000')
  12. })
  14. // myKoa.js
  15. const http = require('http')
  16. const context = require('./context')
  17. const request = require('./request')
  18. const response = require('./response')
  20. class MyKoa {
  21.   // app.use 调用 app.use(callback)
  22.   use(callback) {
  23.     this.callback = callback
  24.   }
  26.   listen(...args) {
  27.     console.log(args)
  28.     const server = http.createServer((req, res) => {
  29.       //this.callback(req, res)
  30.       // 需要先创建上下文
  31.       let ctx = this.createContext(req, res)
  32.       this.callback(ctx)
  33.       res.end(ctx.body)
  34.     })
  35.     server.listen(...args)
  36.   }
  38.   // 将res和req封装到contxt
  39.   createContext(req, res) {
  40.     // 先继承一些我们写的对象
  41.     const ctx = Object.create(context)
  42.     ctx.request = Object.create(request)
  43.     ctx.response = Object.create(response)
  45.     ctx.req = ctx.request.req = req
  46.     ctx.res = ctx.response.res = res
  48.     return ctx
  49.   }
  50. }
  52. module.exports = MyKoa

request.js

  1. module.exports = {
  2.   get url() {
  3.     return this.req.url
  4.   },
  5.   get method() {
  6.     return this.req.method.toLowerCase()
  7.   }
  8. }

response.js

  1. module.exports = {
  2.   get body() {
  3.     return this._body
  4.   },
  5.   set body(val) {
  6.     this._body = val
  7.   }
  8. }

context.js

  1. module.exports = {
  2.   get rul() {
  3.     return this.request.url
  4.   },
  5.   get body() {
  6.     return this.response.body
  7.   },
  8.   set body(val) {
  9.     this.response.body = val
  10.   },
  11.   get method() {
  12.     return this.request.method  
  13.   }
  14. }

优雅的流程描述与切面描述(中间件机制)

koa中间件机制是：利用compose函数组合，将一组需要顺序执行的函数复合为一个函数，外层函数的参数是内层函数的返回值。洋葱圈模型可以形象的表示这种机制机制，是koa源码的精髓和难点。

2_koa中间件洋葱圈模型.png

compose是函数式编程里的一个概念，是多个函数的组合。

compose函数合成

  1. const add = (x, y) => x + y
  2. const square = z => z * z
  3. const fn = (x, y) => square(add(x, y)) // 将两个函数合成一个函数
  4. console.log(fn(1, 2)) // 9
  6. // 更好的写法 => 封装成一个通用方法
  7. const compose = (fn1, fn2) => (...args) => fn2(fn1(...args))
  8. const fn = compose(add, square)
  9. console.log(fn(1, 2)) // 9
  11. // 再次扩展，不固定个数的函数封装
  12. const compose = (...fns) => (...args) => {
  13.   let ret
  14.   // 依次执行每个函数
  15.   fns.forEach((fn, index) => {
  16.     ret = index === 0 ? fn(...args) : fn(ret)
  17.   })
  18.   return ret
  19. }
  20. const fn =  compose(add, square)
  21. console.log(fn(1, 2)) // 9

compose异步洋葱圈

先来看测试demo，怎么实现下面的compose函数呢?

  1. async function fn1(next) {
  2.   console.log('start fn1')
  3.   await next()
  4.   console.log('end fn1')
  5. }
  6. async function fn2(next) {
  7.   console.log('start fn2')
  8.   await next()
  9.   console.log('end fn2')
  10. }
  11. function fn3(next) {
  12.   console.log('start fn3')
  13. }
  15. const finalFn = compose([fn1, fn2, fn3]) // [fn1, fn2, fn3] middlewares
  16. finalFn()
  17. // 打印结果
  18. // start fn1
  19. // start fn2
  20. // start fn3
  21. // end fn2
  22. // end fn1

compose函数实现

  1. async function fn1(next) {
  2.   console.log('start fn1')
  3.   await delay()
  4.   await next()
  5.   console.log('end fn1')
  6. }
  8. async function fn2(next) {
  9.   console.log('start fn2')
  10.   await delay()
  11.   await next()
  12.   console.log('end fn2')
  13. }
  15. async function fn3(next) {
  16.   console.log('start fn3')
  17.   await delay()
  18.   await next()
  19.   console.log('end fn3')
  20. }
  22. function delay() {
  23.   return new Promise((resolve, reject) => {
  24.     setTimeout(() => {
  25.       resolve()
  26.     }, 2000)
  27.   })
  28. }
  30. function compose(fns) {
  31.   return function() {
  32.     return dispatch(0)
  33.     function dispatch(i) {
  34.       let fn = fns[i]
  35.       if (!fn) {
  36.         return Promise.resolve()
  37.       }
  38.       return Promise.resolve(
  39.         fn(() => {
  40.           // dispatch(i + 1)
  41.           return dispatch(i + 1)
  42.         })
  43.       )
  44.     }
  45.   }
  46. }
  47. const finalFn = compose([fn1, fn2, fn3]) // [fn1, fn2, fn3] middlewares
  48. finalFn()
  50. // 执行结果
  51. // start fn1   
  52. // 2s
  53. // start fn2   
  54. // 2s
  55. // start fn3
  56. // 2s
  57. // end fn3
  58. // end fn2
  59. // end fn1
  61. // 思考：将next的函数里面 return dispatch(i + 1) 改为 dispatch(i + 1)
  62. // await next() 时，dispatch(i + 1) 一开始执行，await就向下执行了，并没有等到dispatch(i + 1)完全执行完
  63. // 执行结果
  64. // start fn1
  65. // 2s
  66. // start fn2
  67. // end fn1
  68. // 2s
  69. // start fn3
  70. // end fn2
  71. // 2s
  72. // end fn3

await/async 执行顺序问题

在上面的例子中，我们发现将next的函数里面 return dispatch(i + 1) 改为 dispatch(i + 1)，会导致await没有按预期等待。这里用一个demo来理解async/await的执行顺序问题，await 后面的内容如果函数返回值为promise，则等待promise执行完再向下执行，如果返回值非promise，await不会等待(await下面的代码和await等待的函数会同步执行)

  1. (async () => {
  2.   await test() // await fn()
  3.   console.log('异步执行完成')
  4. })()
  6. async function test() {
  7.   fn() // return fn() 或 await fn()
  8. }
  10. async function fn(next) {
  11.   console.log('start fn')
  12.   await delay()
  13.   console.log('end fn')
  14. }
  16. function delay() {
  17.   return new Promise((resolve, reject) => {
  18.     setTimeout(() => {
  19.       resolve()
  20.     }, 2000)
  21.   })
  22. }
  24. // return fn()  或 await fn() 结果
  25. // start fn
  26. // end fn
  27. // 异步执行完成
  29. // fn() 结果
  30. // start fn
  31. // 异步执行完成
  32. // end fn

参考：async/await函数的执行顺序的理解 - csdn

将compose应用到myKoa中

  1. const http = require('http')
  2. const context = require('./context')
  3. const request = require('./request')
  4. const response = require('./response')
  6. class MyKoa {
  7.   // app.use 调用 app.use(callback)
  8.   constructor() {
  9.     this.middlewares = []
  10.   }
  11.   use(middleware) {
  12.     this.middlewares.push(middleware)
  13.     return this // 支持链式调用 app.use().use()
  14.   }
  16.   listen(...args) {
  17.     console.log(args)
  18.     const server = http.createServer(async (req, res) => {
  19.       // 需要先创建上下文
  20.       let ctx = this.createContext(req, res)
  21.       // 组合函数
  22.       let fn = this.compose(this.middlewares)
  23.       await fn(ctx)
  24.       // 这里简单的处理了下ctx.body 但实际要有很多处理
  25.       let bodyType = typeof ctx.body
  26.       let result = bodyType === 'object' ? JSON.stringify(ctx.body) : ctx.body
  27.       // 解决中文乱码的问题
  28.       res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
  29.       res.end(result)
  30.     })
  31.     server.listen(...args)
  32.   }
  34.   createContext(req, res) {
  35.     // 先继承一些我们写的对象
  36.     const ctx = Object.create(context)
  37.     ctx.request = Object.create(request)
  38.     ctx.response = Object.create(response)
  40.     ctx.req = ctx.request.req = req
  41.     ctx.res = ctx.response.res = res
  43.     return ctx
  44.   }
  46.   compose(fns) {
  47.     return function(ctx) {
  48.       return dispatch(0)
  49.       function dispatch(i) {
  50.         let fn = fns[i]
  51.         if (!fn) {
  52.           return Promise.resolve()
  53.         }
  54.         return Promise.resolve(
  55.           fn(ctx, () => {
  56.             // dispatch(i + 1)
  57.             return dispatch(i + 1)
  58.           })
  59.         )
  60.       }
  61.     }
  62.   }
  63. }
  65. module.exports = MyKoa

用一个demo来测试下，也可以使用上面的 koa优雅处理http - await next() 里面的例子来测试

  1. const delay = () => Promise.resolve(resolve => setTimeout(() => resolve(), 2000))
  3. const Koa = require('./myKoa2')
  4. const app = new Koa()
  6. app.use(async (ctx, next) => {
  7.   ctx.body = '1'
  8.   await next()
  9.   ctx.body += '5'
  10. })
  12. app.use(async (ctx, next) => {
  13.   ctx.body += '2'
  14.   await next()
  15.   ctx.body += '4'
  16. })
  18. app.use((ctx, next) => {
  19.   ctx.body += '3'
  20.   next()
  21. }).use((ctx, next) => {
  22.   // 试试链式调用
  23.   ctx.body += 'end'
  24. })
  26. app.listen(3000)
  28. // 访问网页内容为 123end45

koa compose源码

源码地址： koa compose - github

常见koa中间件的实现

我们可以自己来实现一个中间件，koa中间件规范:

  • 一个async函数
  • 接收ctx和next两个参数
  • 任务结束需要执行next
  1. const mid = async (ctx, next) => {
  2.   // 来到中间件，洋葱圈左边
  3.   next() // 进入其他中间件
  4.   // 再次来到中间件，洋葱圈右边
  5. }

中间件常见任务

  • 请求拦截
  • 路由
  • 日志
  • 静态文件服务

请求拦截中间件

现在动手实现一个请求拦截的中间件

  1. const Koa = require('koa')
  2. cosnt app = new Koa()
  3. cosnt intercept = require('./intercept')
  5. // 请求拦截中间件
  6. app.use(intercept)
  8. app.use((ctx, next) => {
  9.   ctx.body = 'hello'
  10. })
  11. app.listen(3000)

来看看intercept.js的实现

  1. async function intercept(ctx, next) {
  2.   let { res, req } = ctx
  3.   const blacklist = [
  4.     '127.0.0.1',
  5.     '192.168.1.2'
  6.   ]
  7.   const ip = getClientIp(req)
  9.   if (blacklist.includes(ip)) {
  10.     ctx.body = '您无权限访问'
  11.     // 如果不执行next，就无法进入到下一个中间件
  12.   } else {
  13.     await next()
  14.   }
  15. }
  17. // 获取当前IP
  18. function getClientIp(req) {
  19.   let curIp = (
  20.     req.headers['x-forwarded-for'] ||  // 是否有反向代理 IP
  21.     req.connection.remoteAddress || // 判断 connection 的远程 IP
  22.     req.socket.remoteAddress || // 判断后端的 socket 的 IP
  23.     req.connection.socket.remoteAddress 
  24.   )
  25.   curIp.startsWith('::ffff:') && (curIp = curIp.split('::ffff:')[1])
  26.   console.log('当前ip是', curIp)
  27.   return curIp
  28. }
  30. module.exports = intercept

路由中间件 router

来实现一个路由中间件，先来看一个测试demo

  1. const Koa = require('koa')
  2. cosnt app = new Koa()
  3. cosnt Router = require('./router')
  4. const router = new Router()
  6. router.get('/', aysnc ctx => { ctx.body = 'home page'} )
  7. router.get('/index', aysnc ctx => { ctx.body = 'index page'} )
  8. router.get('/post', aysnc ctx => { ctx.body = 'post page'} )
  9. router.get('/list', aysnc ctx => { ctx.body = 'list page'} )
  10. router.post('/config', aysnc ctx => {
  11.   ctx.body = { 
  12.     code: 200,
  13.     msg: 'ok',
  14.     data: { a: 1 }
  15.   }
  16. )
  18. // 请求拦截中间件
  19. app.use(router.routes())
  21. app.use((ctx, next) => {
  22.   ctx.body = '404'
  23. })
  25. app.listen(3000)

router.js 实现 router.routes()函数返回一个中间件函数

  1. class Router {
  2.   constructor() {
  3.     this.stack = []
  4.   }
  6.   register(path, methods, middleware) {
  7.     let route = { path, methods, middleware }
  8.     this.stack.push(route)
  9.   }
  11.   get(path, middleware) {
  12.     // 注册路由
  13.     this.register(path, 'get', middleware)
  14.   }
  16.   post(path, middleware) {
  17.     // 注册路由
  18.     this.register(path, 'post', middleware)
  19.   }
  21.   routes() {
  22.     // 返回一个中间件回调函数 (ctx, next) => { 进行路由处理 }
  23.     let stock = this.stack
  24.     return async (ctx, next) => {
  25.       if (ctx.url === '/favicon.ico') {
  26.         await next()
  27.         return
  28.       }
  29.       const len = stock.length
  30.       let route
  31.       for(let i = 0; i < len; i++) {
  32.         let item = stock[i]
  33.         console.log(ctx.url, item, ctx.method)
  34.         if (ctx.url === item.path && item.methods.includes(ctx.method.toLowerCase())) {
  35.           route = item.middleware
  36.           break
  37.         }
  38.       }
  39.       console.log('route', route)
  40.       if (typeof route === 'function') {
  41.         // 如果匹配到了路由
  42.         route(ctx, next)
  43.       } else {
  44.         await next()
  45.       }
  46.     }
  47.   }
  48. }
  50. module.exports = Router

静态文件服务中间件

koa-staic，配置静态文件目录，默认为static获取文件或目录信息，静态文件读取，先来看看使用demo

  1. const Koa = require('koa')
  2. const app = new Koa()
  3. const static = require('./static')
  5. app.use(static(__dirname + '/public'))
  7. app.listen(3000, () => {
  8.   console.log('服务已开启，端口号3000')
  9. })

static.js 实现

  1. const fs = require('fs')
  2. const path = require('path')
  4. // console.log(path, '*' + path.resolve)
  6. function static(dirPath = './pbulic') {
  7.   return async (ctx, next) => {
  8.     // 校验是否是static目录
  9.     if (ctx.url.startsWith('/public')) {
  10.       // 将当前路径和用户指定的路径合并为一个绝对路径
  11.       let url = path.resolve(__dirname, dirPath)
  12.       console.log(url)
  13.       // /Users/kevin/Desktop/feclone/fedemo/src/node/node视频教程笔记/1_koa/静态文件服务中间件/public
  14.       console.log(ctx.url) // /public/2sdf/323
  15.       let filePath = url + ctx.url.replace('/public', '')
  16.       try {
  17.         let stat = fs.statSync(filePath) // https://nodejs.org/docs/latest/api/fs.html#fs_fs_statsync_path_options
  18.         if (stat.isDirectory()) {
  19.           // 如果是目录，列出文件
  20.           let dir = fs.readdirSync(filePath)
  21.           console.log(dir)
  22.           if (dir.length === 0) {
  23.             ctx.body = '目录为空'
  24.             return
  25.           }
  26.           let htmlArr = ['<div style="margin:30px;">']
  27.           dir.forEach(filename => {
  28.             htmlArr.push(
  29.               filename.includes('.') ? 
  30.               `<p><a style="color:black" href="${ctx.url}/${filename}">${filename}</a></p>` : 
  31.               `<p><a href="${ctx.url}/${filename}">${filename}</a></p>`
  32.             )
  33.           })
  34.           htmlArr.push('</di>')
  35.           ctx.body = htmlArr.join('')
  36.         } else {
  37.           // 如果是文件 
  38.           let content = fs.readFileSync(filePath)
  39.           console.log(content)
  40.           ctx.body = content.toString()
  41.         }
  42.       } catch(e) {
  43.         console.error(e)
  44.         // ctx.body = ctx.url + '文件或目录不存在'
  45.         ctx.body = 'Not Found'
  46.       }
  47.     } else {
  48.       // 非静态资源，执行下一个中间件
  49.       await next()
  50.     }
  51.   }
  52. }
  54. module.exports = static

日志服务中间件

基于上面的例子，我们增加一个日志服务中间件，用于记录访问记录

  1. const Koa = require('koa')
  2. const app = new Koa()
  3. const static = require('./static')
  4. const Logger = require('./log')
  5. const logger = new Logger()
  7. // 日志中间件
  8. app.use(logger.log())
  10. app.use(static(__dirname + '/public'))
  12. app.listen(3000, () => {
  13.   console.log('服务已开启，端口号3000')
  14. })

log.js 实现demo

  1. class Logger {
  2.   constructor() {
  3.     this.logs = []
  4.   }
  6.   log() {
  7.     return async (ctx, next) => {
  8.       // 记录进入时间
  9.       let temp = {}
  10.       let startTime = +(new Date()) 
  11.       let endTime
  12.       await next()
  13.       endTime = +(new Date())  // 结束时间
  14.       Object.assign(temp, {
  15.         startTime,
  16.         endTime,
  17.         url: ctx.url,
  18.         resTime: (endTime - startTime) + 'ms'
  19.       })
  20.       this.logs.push(temp)
  21.       console.log(this.showLogs())
  22.     }
  23.   }
  25.   showLogs() {
  26.     console.log(this.logs)
  27.   }
  29. }
  31. module.exports = Logger