实现自己的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(3000, function () {
  console.log('启动3000端口')
})

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

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

APP  启动应用

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

const http = require('http')

const server = http.createServer((req,res) => {
  res.writeHead('200')
  res.end('hello node')
})
server.listen(3000, 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(200)
  res.end('hello Koa3')
})

app.listen(3003, 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(3003, function () {
  console.log('启动3003端口')
})

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

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

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

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

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(0)

        function dispatch(i) {
          let fn = middlewares[i]
          if(!fn) {
            return Promise.resolve()
          }
          // 这俩行是compose的核心代码
          return Promise.resolve(fn(context, function next() {
            return dispatch(i+1)
          }))
        }
    }
  }
  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()
    }, 2000)
  })
}

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

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

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

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

运行结果： 

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

Koa2的其他知识

 

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