在我看来,前端框架的中间件的思想来源于传统后端的切面编程(AOP)思想,好比咱们常见的身份校验(JWT)。html
axios的拦截器也是基于这种程序设计模式的。前端
在koa中,其实是由一个数组对象来保存全部的中间件的,原理解析能够参考这篇博客:http://www.javashuo.com/article/p-mlvdlxoq-he.html。ios
除此以外,还得益于js的异步事件队列,关于异步事件队列,可参考这篇博客:http://www.javashuo.com/article/p-cziswgsn-bv.html。编程
中间件的事件处理能够是同步事件,也能够是异步事件,可是得注意了异步事件老是会等同步事件所有执行完成以后才会去执行(后面有个与之相关的中间件)。axios
1、模块化路由中间件后端
home.js设计模式
一个home路由下,有两个请求地址,一个啥都不写,另外一个写了点数据,并将这个koa-router看成模块暴露出去数组
index.js前端框架
这也是一个路由,路由包路由,并添加了一个父路径--“/home”.而且将这个路由暴露出去app
最终供咱们app使用
此时,咱们访问127.0.0.1:1996/home/nav
127.0.0.1:1996/home/
针对这种状况,咱们须要对接口的数据返回作一个统一的处理。
2、自定义格式化返回数据中间件
这里为何在next()后面处理数据?应为next()函数返回一个Promise对象,then函数里面的回调是异步的,这就能保证在路由中间件里的业务逻辑必定先于此处的数据处理。
有一点须要注意的是,koa的ctx.status默认值是404,因此咱们要在接口内把业务逻辑写完后修改ctx.status的值,这样,上述中间件就能对不一样业务状态返回不一样的格式化数据给前台。
有了该中间件以后:
localhost:1996/home
localhost:1996/home/nav
另外,若是你以为根据业务逻辑来修改ctx.status的值很麻烦的话,能够适当封装工具类来达到目的,例以下面这个工具类: