在我看來,前端框架的中間件的思想來源於傳統後端的切面編程(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的值很麻煩的話,能夠適當封裝工具類來達到目的,例以下面這個工具類: