长宁微信手机网站制作,wordpress 轮播广告,赤壁网站开发,移动版网站怎么做一、Koa2中间件源码分析
在Koa2中#xff0c;中间件被存放在一个数组中。 使用koa中#xff0c;最常见的就是app.use(fn)#xff0c;use函数部分源码如下所示。首先中间件必须是个函数。若是generator函数#xff0c;则需要进行转化。最后把该中间件推入middelaware数组中…一、Koa2中间件源码分析
在Koa2中中间件被存放在一个数组中。 使用koa中最常见的就是app.use(fn)use函数部分源码如下所示。首先中间件必须是个函数。若是generator函数则需要进行转化。最后把该中间件推入middelaware数组中。
constructor() {this.middleware [];
}
use(fn) {this.middleware.push(fn);
}当调用app.listen函数时实际上是创建了一个原生http服务器并执行了Koa自身的callback方法。
listen(...args) {const server http.createServer(this.callback());return server.listen(...args);
}callback函数中compose是将中间件封装成一个迭代器按照middleware数组中顺序执行下去实现了面向切面编程。handleRequest函数则是将req和res封装成ctx并执行中间件。
callback() {const fn compose(this.middleware);const handleRequest (req, res) {const ctx this.createContext(req, res);return this.handleRequest(ctx, fn);};return handleRequest;
}
handleRequest(ctx, fnMiddleware) {...return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}compose用来返回一个迭代器函数fnMiddleware该函数接受两个参数context和next。因为调用时只向fnMiddleware传入了第一个参数context所以next参数的值一直是undefined。
首先定义了indexdispatch传入的参数 i 作为每个中间件的调用标志每次中间件调用next函数都会让index 1若是中间件多次调用next则会使index大于等于该标志就会报错。
然后依次读取中间件数组中的中间件并将context和封装了调用标志i的dispatch函数传给中间件就实现了中间件的过程。 当读取完中间件数组后即i middleware.length时将值为是undefined的next传给fn并结束迭代。dispatch函数所有的返回值都是Promise函数这样就可以实现异步编程。
function compose (middleware) {return function (context, next) {// last called middleware #let index -1return dispatch(0)function dispatch (i) {if (i index) return Promise.reject(new Error(next() called multiple times))index ilet fn middleware[i]if (i middleware.length) fn nextif (!fn) return Promise.resolve()try {return Promise.resolve(fn(context, dispatch.bind(null, i 1)));} catch (err) {return Promise.reject(err)}}}
}二、Redux中间件源码分析
在Redux中需要引入中间件的话需引入applyMiddleware函数并将其作为参数传给createStore。下方enhancer就是就是applyMiddleware的返回值。
export default function createStore(reducer, preloadedState, enhancer) {...return enhancer(createStore)(reducer, preloadedState)
}applyMiddleware接受一个中间件数组为参数。
export default function applyMiddleware(...middlewares) {return createStore (...args) {const store createStore(...args)let dispatch () {throw new Error(Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.)}const middlewareAPI {getState: store.getState,dispatch: (...args) dispatch(...args)}const chain middlewares.map(middleware middleware(middlewareAPI))dispatch compose(...chain)(store.dispatch)return {...store,dispatch}}
}其中compose用Array.prototype.reduce将中间件数组封装成一个层层包裹的函数。
function compose(...funcs) {return funcs.reduce((a, b) (...args) a(b(...args)))
}若本来的中间件数组是 [a, b, c] 经过compose函数封装后就成了 (...arg) a(b(c(...arg))) dispatch compose(...chain)(store.dispatch)经过这个过程后每次调用dispatch就会在中间件中进行遍历。每个中间件都需要调用next(action)来保证中间件链都能被执行。
Redux中中间件的写法一般为 const middleware store next action {...}根据上面的分析store参数就是middlewareAPI但是其中的dispatch并不是真正的dispatch这是为了防止在中间件中调用store.dispatch而导致重新遍历整个中间件链。next是下一个中间件需要传递action直到最后一个中间件时next即是原始的store.dispatch。
三、Koa2和Redux中间件比较
在两者中都出现了compose函数。 Koa2中的compose函数实现原理是用dispatch函数自身迭代是从左向右执行中间件函数。而Redux中的compose实现原理是用了数组的reduce方法从右向左执行中间件函数。两者执行顺序虽然不同一样的是先执行的中间件可以获取后执行的中间件的状态store的状态或者context的状态实现了面向切面编程。
