20行代码简单实现koa洋葱圈模型示例详解

// app.js
const koa = require('koa');
const app = new koa();
app.use(async (ctx, next) => {
  console.log('进入第一个中间件')
  next();
  console.log('退出第一个中间件')
})
app.use(async (ctx, next) => {
  console.log('进入第2个中间件')
  next();
  console.log('退出第2个中间件')
})
app.use((ctx, next) => {
  console.log('进入第3个中间件')
  next();
  console.log('退出第3个中间件')
})
app.use(ctx => {
  ctx.body = 'hello koa'
})
app.listen(8080, () => {
  console.log('服务启动，监听8080端口')
})

async function responseTime(ctx, next) {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  ctx.set('X-Response-Time', `${ms}ms`);
}
app.use(responseTime);

function compose (middleware) {
  // 返回一个匿名函数，next为可选参数
  return function (context, next) {
    // 记录当前执行位置的游标
    let index = -1
    // 从第一个中间件开始，串起所有中间件
    return dispatch(0)
    function dispatch (i) {
      // 为了不破坏洋葱圈模型，不允许在单个中间件中执行多次next函数
      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 {
        // 核心处理逻辑，进入fn的执行上下文的时候，dispatch就是通过绑定下一个index，变成了next，进入到下一个中间件
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

Promise.resolve(fn(context, dispatch.bind(null, i + 1)))

UnhandledPromiseRejectionWarning: Error: next() called multiple times

const koaCompose = require('koa-compose');
function download = (ctx, next) {
  console.log('download code');
  next();
}
function check = (ctx, next) {
  console.log('check style');
  next();
}
function post = (ctx, next) {
  next();
  console.log('post result', ctx.result);
}
function clean = (ctx, next) {
  next();
  console.log('clean temp, remove code');
}
const flowEngine = koaCompose([download, check, post, clean]);
flowEngine(ctx as Context);