一步步去阅读koa源码,中间件执行原理

659 阅读5分钟
原文链接: blog.naice.me

一步步去阅读koa源码,中间件执行原理

koa的中间件执行的流程控制,代码的是非常精妙的。由下面的一张洋葱模型的图来形容,记住这张图。

为什么是这样子的图,下面我们有一个例子来描述一下

const Koa = require('koa') const app = new Koa() // fn1 app.use(async (ctx, next) => { console.log('fn1-1') next() console.log('fn1-2') }) // fn2 app.use(async (ctx, next) => { console.log('fn2-1') next() console.log('fn2-2') }) // fn3 app.use(async (ctx, next) => { console.log('fn3-1') next() console.log('fn3-2') }) app.listen(4002) // fn1-1、fn2-1、fn3-1、fn3-2、fn2-2、fn1-2

上面的这个例子,顺序打印出来的是fn1-1、fn2-1、fn3-1、fn3-2、fn2-2、fn1-2,现在只知道,调用next()函数就会把控制流程就跳到下一个中间件,知道执行所有完之后然后再逐步向上执行前一个next后面的代码。这根跟洋葱有很大的相像似性(如果你愿意一层一层一层的剥开我的心~~~)。

探索

但是其中的原理是什么呢??下面我们一步步去探索。

首先是调用 app.use(fn)这行代码,这行代码在源码里面,删除一些代码判断,是这样子的

constructor() { super(); this.middleware = []; } use(fn) { this.middleware.push(fn); return this; }

就是把所有函数push到一个middleware的数组之中,这个use就是专门干这中勾当的。

好了知道use的作用了,执行了use之后 我们的middleware中就有很多中间件函数了,下面我们继续看下去。

然后执行到 app.listen函数之后,代码如下

listen(...args) { // 创建一个server const server = http.createServer(this.callback()); return server.listen(...args); }

我们看到里么有个this.callback()执行函数,然后我们跳到这个函数里面。

callback() { // 我们看这里 const fn = compose(this.middleware); const handleRequest = (req, res) => { const ctx = this.createContext(req, res); // 这个节点我们请记住下面这一行代码 return this.handleRequest(ctx, fn); }; return handleRequest; }

这个callback函数里面,执行了compose函数,并且把middleware数组作为参数传递进去。

执行到了compose函数,下面我们就看看compose里面有什么。

compose函数就是一开始引用了koa-compose模块,简化之后发现里面的代码如下,简化后就简简单单的20几行代码,后面会详细解释下面的代码。

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, function next () { return dispatch(i + 1) })) } catch (err) { return Promise.reject(err) } } } }

执行这个compose返回一个函数,这也是最核心的一个函数。注意这是上面的callback调用的。得到一个fn函数

看上面的callback调用的

然后执行到this.handleRequest(ctx, fn);这个函数吧ctxfn(这个就是上面compose返回的函数)作为参数,传入到this.handleRequest中。 代码如下。

handleRequest(ctx, fnMiddleware) { return fnMiddleware(ctx).then(handleResponse).catch(onerror); }

到这里才真正的执行了compose返回的函数,把ctx传进去。然后我们继续看这个函数fnMiddleware(ctx),其实就是下面这样子的。

function (context, next) { // 设置了一个出事索引值 let index = -1 // 调用dispatch函数,开始时候传0进去 return dispatch(0) // 声明dispatch函数, function dispatch (i) { // 把传进来的赋值给index index = i // 拿出middleware第i个中间件函数,赋值给fn let fn = middleware[i] // 判断如果i 等于middleware的长度 就把next 赋值给 fn if (i === middleware.length) fn = next // 如果fn是假的 return return Promise.resolve() if (!fn) return Promise.resolve() try { // 返回一个Promise.resolve, 同时执行fn, 也就是中间件,把next 函数传递到fn里面 return Promise.resolve(fn(context, function next () { // 递归调用自己 return dispatch(i + 1) })) } catch (err) { return Promise.reject(err) } } }

上面的代码是这个部分的精华。这里详细的说一下,首先定义了一个indexdispatch函数, 然后一开始调用dispatch(0)函数,里面把0赋值给了index,然后从middleware的数组(例子中我们有三个中间件函数)中拿到第0个中间件函数,赋值给fn,经过两个if都不符合条件,然后执行

return Promise.resolve(fn(context, function next () { // 递归调用自己 return dispatch(i + 1) }))

这里的执行fn 中间件函数,并且把ctx和  function next () { return dispatch(i + 1) })作为参数传递进去。这个时候代码如下一幕了然

app.use(async (ctx, next) => { console.log('fn1-1') next() // 执行传入的next console.log('fn1-2') })

执行这个函数 就会打印出fn1-1 然后就会执行next()函数,看上上一块代码,执行next()函数里面会调用 dispatch(i + 1)也就是调用第fn = middleware[1] 正是第二个中间件。

看到这里大家就大概明白了。然后进入第二个中间件执行fn,打印出fn2-1,继续执行next()函数,next函数里面继续调用 dispatch(i + 1)

也就是fn = middleware[2] 第三中间件函数,打印出fn3-1,继续执行next()函数里面会调用 dispatch(i + 1),也就是fn = middleware[3]

这里注意了,if (i === middleware.length) fn = next到这里会符合这个条件,然后把next赋值给fn这里的next就是这个fnMiddleware(ctx).then(handleResponse).catch(onerror);调用时候传入的,然而这里并没有传入,所以这时候 fn就是 undefined,然后继续执行到if (!fn) return Promise.resolve() 返回一个空的值,这就是第三个中间件的next执行结果,

然后继续执行下一行就打印出了fn3-2,最后向上执行到fn2-2,然后到fn1-2, 整个中间件的执行过程。很像洋葱模型,一层层进入,然后一层层出来。

好了整个中间件执行过程就是酱紫啦~~~

最后安利一波博客: github.com/naihe138/na…