koa中間件的實現原理如何?先來看一個例子。
koa的執行順序是這樣的:
const middleware = async function (ctx, next) {
console.log(1)
await next()
console.log(6)
}
const middleware2 = async function (ctx, next) {
console.log(2)
await next()
console.log(5)
}
const middleware3 = async function (ctx, next) {
console.log(3)
await next()
console.log(4)
}
會依次打印1,2,3,4,5,6
問題是koa中間件實現原理,也就是洋蔥模型的實現原理是什么?
一、問題分析
async await是promise的語法糖,await后面跟一個promise,所以上面的代碼可以寫成:
const middleware = function (ctx, next) {
console.log(1)
next().then(() => {
console.log(6)
})
}
const middleware2 = function (ctx, next) {
console.log(2)
next().then(() => {
console.log(5)
})
}
const middleware3 = function (ctx, next) {
console.log(3)
next().then(() => {
console.log(4)
})
}
改成這樣更好理解一些,所以流程控制的核心在于next的實現。
next要求調用隊列中下一個middleware,當達到最后一個的時候resolve。這樣最后面的promise先resolve,一直到第一個,這樣就是洋蔥模型的順序了。
二、實現
koa-compose的實現是這樣的:
function compose(middleware) {
return function (context, next) {
let index = -1
return dispatch(0)
function dispatch(i) {
index = i
let fn = middleware[i]
if (i === middleware.length) fn = next
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
} catch (err) {
return Promise.reject(err)
}
}
}
}
我們把一些參數檢查的非核心邏輯去掉了,實現代碼就上面那些。每次傳入的next都是調用下一個middleware,這樣是一個遞歸的過程,結束條件是最后一個middleware的next是用戶傳入的。
這里面有一些亮點:
1. 這是一種尾遞歸的形式,尾遞歸的特點是最后返回的值是一個遞歸的函數調用,這樣執行完就會在調用棧中銷毀,不會占據調用棧.
2. 返回的是一個Promise.resolve包裝之后的調用,而不是同步的調用,所以這是一個異步遞歸,異步遞歸比同步遞歸的好處是可以被打斷,如果中間有一些優先級更高的微任務,那么可以先執行別的微任務
3. compose是函數復合,把n個middleware復合成一個,參數依然是context和next,這種復合之后依然是一個middleware,還可以繼續進行復合。
三、總結
Koa 中間件的實現原理,也就是洋蔥模型的實現原理,核心在于next的實現。next需要依次調用下一個middleware,當到最后一個的時候結束,這樣后面middleware的promise先resolve,然后直到第一個,這樣的流程也就是洋蔥模型的流程了。
實現的時候還有一些細節,一個是遞歸最好做成尾遞歸的形式,而是用異步遞歸而不是同步遞歸,第三就是形式上用函數復合的形式,這樣復合之后的中間件還可以繼續復合。