实现自己的Koa2

这部分的代码在https://github.com/zhaobao1830/koa2中demo文件夹中

Koa就是基于node自带的http模块，经过封装，监听端口，实现ctx(上下文)管理，中间件管理等

例子1、koa监听3000端口，在页面输出值

 const Koa = require('koa')
 const app = new Koa()

 app.use((ctx,next) => {
   ctx.body = 'hello koa2'
 })

 app.listen(, function () {
   console.log('启动3000端口')
 })

ctx 是封装了request和response的上下文

next  的作用就是执行下一个中间件

APP  启动应用

例子2、http监听3000端口，页面返回值

 const http = require('http')

 const server = http.createServer((req,res) => {
   res.writeHead('')
   res.end('hello node')
 })
 server.listen(, function () {
   console.log('启动了3000端口')
 })

例子3、使用http封装一个简单的web服务

 const http = require('http')

 class application{
   constructor() {
     this.callback = () => {}
   }

   use(callback) {
     this.callback = callback
   }

   listen(...args) {
     const server = http.createServer((req,res) => {
       this.callback(req, res)
     })
     server.listen(...args)
   }
 }

 module.exports = application

 const Koa3 = require('./index3')
 const app = new Koa3()

 app.use((req,res) => {
   res.writeHead()
   res.end('hello Koa3')
 })

 app.listen(, function () {
   console.log('启动3003端口')
 })

例子4：

koa2中的ctx就是上下文，用来挂载request和response对象

js的get和set方法

 const yese = {
   _name: '夜色',
   get name() {
     return this._name
   },
   set name(val) {
     console.log('new name is' + val)
     this._name = val
   }
 }

 console.log(yese.name)
 yese.name = '荷塘月色'
 console.log(yese.name)

加入ctx上下文，封装了http里的request和response

index7.js

 const http = require('http')

 //req是http模块里的
 let request = {
   get url () {
     return this.req.url
   }
 }

 let response = {
   get body () {
     return this._body
   },
   set body (val) {
     this._body = val
   }
 }

 // 把上面定义的request和response挂载到context对象中
 let context = {
    get url () {
      return this.request.url
    },
    get body () {
      return this.response.body
    },
   set body (val) {
      this.response.body = val
   }
 }

 class application{
   constructor() {
     // 把上面定义的context，request，response挂载到application中
     this.context = context
     this.request = request
     this.response = response
   }

   use(callback) {
     this.callback = callback
   }
   listen(...args) {
     const server = http.createServer(async (req, res) => {
       let ctx = this.createCtx(req,res)
       await this.callback(ctx)
       ctx.res.end(ctx.body)
     })
     server.listen(...args)
   }
   createCtx (req, res) {
     let ctx = Object.create(this.context)
     ctx.request = Object.create(this.request)
     ctx.response = Object.create(this.response)
     // 把http里的req赋值给ctx.request的req和ctx.req上
     ctx.req = ctx.request.req = req
     ctx.res = ctx.response.req = res
     return ctx
   }
 }

 module.exports = application

调用

 const Koa3 = require('./index7')
 const app = new Koa3()

 app.use(async (ctx) => {
   ctx.body = 'hello Koa2 '+ ctx.url
 })

 app.listen(, function () {
   console.log('启动3003端口')
 })

例子5、（这个例子是同步的）compose中间件

 function add(x, y) {
   return x + y
 }
 function double(z) {
   return z*
 }

 const middlewares = [add, double]
 let len = middlewares.length
 // 中间件
 function compose(midds) {
   console.log('midds:'+midds)
    return (...args) => {
     console.log(...args)
      // 初始值
      let res = midds[](...args)
      console.log(res)
      for (let i = ; i < len; i++) {
        res = midds[i](res)
      }
      return res
    }
 }
 const fn = compose(middlewares)
 const res = fn(,)
 console.log(res)

例子6、

自己实现的一个简单的compose代码

 async function fn1(next) {
   console.log('fn1')
   await next()
   console.log('end fn1')
 }
 async function fn2(next) {
   console.log('fn2')
   await delay()
   await next()
   console.log('end fn2')
 }
 function fn3() {
   console.log('fn3')
 }

 function delay() {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve()
     }, )
   })
 }

 function compose (middlewares) {
   return function () {
     return dispatch()

     function dispatch(i) {
       let fn = middlewares[i]
       if(!fn) {
         return Promise.resolve()
       }
       // 这俩行是compose的核心代码
       return Promise.resolve(fn(function next() {
         return dispatch(i+)
       }))
     }
   }

 }

 const middlewares = [fn1, fn2, fn3]

 const finalfn = compose(middlewares)
 finalfn()

运行结果为：

个人理解：核心就是先执行方法里的值，遇到了next（），就执行下一层的（koa2是一个类似洋葱圈的结构）

index11.js

 const http = require('http')

 //req是http模块里的
 let request = {
   get url () {
     return this.req.url
   }
 }

 let response = {
   get body () {
     return this._body
   },
   set body (val) {
     this._body = val
   }
 }

 // 把上面定义的request和response挂载到context对象中
 let context = {
   get url () {
     return this.request.url
   },
   get body () {
     return this.response.body
   },
   set body (val) {
     this.response.body = val
   }
 }

 class application{
   constructor() {
     // 把上面定义的context，request，response挂载到application中
     this.context = context
     this.request = request
     this.response = response
     this.middlewares = []
   }

   use(callback) {
     this.middlewares.push(callback)
     // this.callback = callback
   }
   compose (middlewares) {
     return function (context) {
       return dispatch()

         function dispatch(i) {
           let fn = middlewares[i]
           if(!fn) {
             return Promise.resolve()
           }
           // 这俩行是compose的核心代码
           return Promise.resolve(fn(context, function next() {
             return dispatch(i+)
           }))
         }
     }
   }
   listen(...args) {
     const server = http.createServer(async (req, res) => {
       let ctx = this.createCtx(req,res)
       const fn = this.compose(this.middlewares)
       await fn(ctx)
       ctx.res.end(ctx.body)
     })
     server.listen(...args)
   }
   createCtx (req, res) {
     let ctx = Object.create(this.context)
     ctx.request = Object.create(this.request)
     ctx.response = Object.create(this.response)
     // 把http里的req赋值给ctx.request的req和ctx.req上
     ctx.req = ctx.request.req = req
     ctx.res = ctx.response.req = res
     return ctx
   }
 }

 module.exports = application

 const Koa3 = require('./index11')
 const app = new Koa3()

 function delay() {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve()
     }, )
   })
 }

 app.use(async (ctx, next) => {
   ctx.body = ''
   await next()
   ctx.body += ''
 })

 app.use(async (ctx, next) => {
   ctx.body += ''
   await delay()
   await next()
   ctx.body += ''
 })

 app.use(async (ctx, next) => {
   ctx.body += ''
 })

 app.listen(, function () {
   console.log('启动3003端口')
 })

运行结果：

打开页面 2秒以后出现：13542 （async await要等异步的操作都执行完，才会输出结果）

Koa2的其他知识

app.use()就算是一个中间件
中间件概念：一个http请求是：发起请求request,返回结果response，中间的部分就可以理解为中间件