JavaScript 实现类似Express的中间件系统(实例详解)
锋利的绵羊 人气:0Express 的中间件系统
在 Express 中可以给一个请求设置若干个中间件,在处理响应时会按顺序执行这些中间件,正在执行的中间件可以控制是否执行下一个中间件。
模拟实现的 Express 将拥有这些功能:
- Express 类拥有三个实例方法:
run(url)
开始执行中间件,接收 url。 use(fn)
设置应用中间件,在路由中间件之前执行。get(url, fn)
设置路由中间件,只在url
与请求路由一致时执行。fn
的定义为:(req:any, res:any, next) => void
。- 在
fn
中调用next()
方法执行下一个中间件。 - 在
fn
中调用res.end(response)
方法后将本次响应值为response
并且不再执行后续中间件。 - req 和 res 会逐层传递,可以被修改。
- 调用
run(url)
方法后开始执行中间件。 - 如果没有注册对应的路由中间件,则只执行应用中间件。
- 如果有对应的路由中间件,则先执行应用中间件后执行路由中间件。
- 中间件按照注册顺序执行。
大概的使用方式如下:
class Express {} const app = new Express(); app.use(function (req, res, next) { console.log("mid"); next(); }); app.use(function (req, res, next) { console.log("mid"); next(); }); app.get("/home", function (req, res, next) { console.log("page home"); next(); }); app.get("/detail", function (req, res, next) { console.log("page detail"); next(); }); app.run("/home");
实现代码
const appMiddlewareKey = Symbol("app_middleware"); class Express { constructor() { this.middleware = {}; } use(fn) { this.get(appMiddlewareKey, fn); } get(url, fn) { if (!this.middleware[url]) { this.middleware[url] = []; } function wrap(ctx) { return new Promise((resolve, reject) => { ctx.res.end = (response) => { reject(response); }; try { const result = fn(ctx.req, ctx.res, () => { resolve(ctx); }); if (result instanceof Promise) { result.catch(reject); } } catch (error) { reject(error); } }); } this.middleware[url].push(wrap); } run(url) { const chain = [].concat(this.middleware[appMiddlewareKey]); const route = this.middleware[url]; if (route) { chain.push(...route); } const ctx = { req: { url, }, res: {}, }; let promise = Promise.resolve(ctx); chain.forEach((middleware) => { promise = promise.then(middleware); }); return promise.then((ctx) => ctx.res); } }
如何实现异步执行链
在调用 use()
方法或 get()
方法设置中间件时,将传入的回调函数包装成一个返回 Promise 对象的新函数。
function wrap(ctx) { return new Promise((resolve, reject) => { // 提供停止执行中间件的方法 ctx.res.end = (response) => { reject(response); }; try { const result = fn(ctx.req, ctx.res, () => { resolve(ctx); }); if (result instanceof Promise) { result.catch(reject); // 如果传入中间件回调返回值为 Promise } } catch (error) { reject(error); } }); } this.middleware[url].push(wrap);
在调用 .run()
方法时,先根据传入的 url
决定要执行的中间件,然后遍历中间件列表,拼接成一个 Promise 链。
let promise = Promise.resolve(ctx); chain.forEach((middleware) => { promise = promise.then(middleware); });
如何将控制权交给中间件函数
wrap()
方法中,给实际的中间件函数传递一个方法,这个方法调用后 wrap()
返回的 Promise 才会被 resolve,这个方法就是 next()
方法。
const result = fn(ctx.req, ctx.res, () => { resolve(ctx); });
使用示例
应用级中间件与路由级中间件
用 use()
绑定的中间件为应用级中间件,用 get()
绑定的为路由级中间件。应用级中间件总是会执行,只调用 .run()
方法接收到的对应 url 的路由中间件。
以下例子不调用 /detail
的路由中间件。
app.use(function (req, res, next) { res.name = "zhangkb"; next(); }); app.get("/home", function (req, res, next) { console.log("page home", req); next(); }); app.get("/detail", function (req, res, next) { console.log("page home", req); next(); }); app.run("/home");
.run()
的返回值与异常处理
.run()
方法返回一个 Promise 对象,如果所有中间件都执行完毕无异常则返回 res 对象:
app.use(function (req, res, next) { res.name = "zhangkb"; next(); }); app.run("/").then((res) => { console.log("success", res); });
如果在中间件中用 throw
关键字抛出异常或者调用 res.end()
方法,则会停止执行后续中间件,并将抛出的异常对象(或 res.end()
的参数)作为 Promise 的失败原因。
app.use(function (req, res, next) { res.name = "zhangkb"; res.end(new Error("reason")); // 主动停止 throw new Error("reason"); // 抛出异常 next(); }); app.run("/").catch((error) => { console.log("error", error); });
加载全部内容