簡單看一下koa和redux中中間件的實(shí)現(xiàn)

KOA

我們先來看一下koa中間件的用法，copy一個(gè)官網(wǎng)的例子

打印結(jié)果

koa的中間件，其實(shí)主要是koa-compose實(shí)現(xiàn)的，use方法是將函數(shù)推入隊(duì)列當(dāng)中，listen函數(shù)中會(huì)調(diào)用compose返回一個(gè)函數(shù)，在每次請(qǐng)求時(shí)，會(huì)去調(diào)用這個(gè)函數(shù)。我們主要看一下compose函數(shù)的實(shí)現(xiàn)

compose函數(shù)接收的是middleware的隊(duì)列，就是前面使用use將所有middleware推入的隊(duì)列。返回的也是一個(gè)函數(shù)，在每次處理請(qǐng)求時(shí)，其實(shí)執(zhí)行的是返回的函數(shù)。我們將返回的函數(shù)簡單處理一下。

這個(gè)函數(shù)結(jié)果context、next兩個(gè)參數(shù)，返回了dispatch(0)的執(zhí)行結(jié)果，dispatch函數(shù)接收一個(gè)index參數(shù)，通過index獲取到當(dāng)前執(zhí)行的中間件fn，然后執(zhí)行fn(context, dispatch.bind(null, i + 1))。

從dipatch(0)開始執(zhí)行，其實(shí)就是將中間件通過dispatch函數(shù)去執(zhí)行，控制入棧時(shí)機(jī)。

如果我們修改一下代碼，將第一個(gè)函數(shù)去掉async，那么打印的順序也會(huì)發(fā)生變化

而本質(zhì)其實(shí)是這么執(zhí)行的?

而 fn2又相當(dāng)于

相當(dāng)于將console.log(4)放到了微任務(wù)隊(duì)列，會(huì)在當(dāng)前所有同步代碼執(zhí)行完成后，再去執(zhí)行。

Redux

redux中間件是在 dispatch action 的時(shí)候和 action 到達(dá) reducer 之間調(diào)用的。我們也簡單copy一段官網(wǎng)的例子

applyMiddleware返回了一個(gè)函數(shù)

這塊的compose也比較巧妙，而且傳入中間件時(shí)使用多層函數(shù)，使用時(shí)通過多次調(diào)用最終將store、next傳入，形成閉包，也很巧妙。

但是相比koa，store、next作為中間件的參數(shù)可能更容易理解。