视频中的express中间件实现方案有点问题, 还可以优化一下

Question

视频中的方案, 如果测试case如下:

app.use((req, res, next) => {
  console.log("1 use...");
  next();
});

app.get((req, res, next) => {
  // 假设在处理 cookie
  console.log("2 get...");
  next();
});

app.use("/api", (req, res, next) => {
  console.log("3 use...");
  next();
});

结果:

1 use...
3 use...
2 get...

而期望应该是:

1 use...
2 get...
3 use...

Answer 1

提问者 GivenCui 2019-06-22 17:16:38

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

/* 我的实现思路: */   // like-express.js   const http = require("http"); const slice = Array.prototype.slice;   class Express {     constructor() {         this.stacks = [];     }     _isMatch(req, stack) {         if (req.url === "/favicon.ico") {             return false;         }         if (req.url.indexOf(stack.path) === 0) {             if (req.method.toLowerCase() === stack.method || stack.method === "all") {                 return true;             }         }         return false;     }     _resgister(method, args) {         if (typeof args[0] === "string") {             this.stacks.push({                 path: args[0],                 middleware: slice.call(args, 1),                 method              });         } else {             this.stacks.push({                 path: "/",                 middleware: slice.call.call(args),                 method             });         }     }     use() {         this._resgister("all", arguments);     }     get() {         this._resgister("get", arguments);     }     post() {         this._resgister("post", arguments);     }     _trigger(req, res) {         const finalStacks = [];         this.stacks.forEach(stack => {             if (this._isMatch(req, stack)) {                 finalStacks.push(...stack.middleware);             }         });         const next = () => {             const cb = finalStacks.shift();             if (cb) {                 cb(req, res, next);             }         };         next();     }     _serverHandle(req, res) {         res.json = data => {             res.setHeader("content-type", "application/json");             res.end(JSON.stringify(data));         };         this._trigger(req, res);     }     listen() {         // 利用箭头函数在定义时绑定         const server = http.createServer((req, res) => {             // console.log("this === http", this === http); // false             // console.log("this intanceof Express", this instanceof Express); // true             this._serverHandle(req, res);         });         server.listen(...arguments);     } }   module.exports = function() {     return new Express(); };

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

// test.js   const expressLike = require("./like-express");   const app = expressLike();   app.use("/", (req, res, next) => {     console.log(1, "use 开始");     next();     console.log(1, "use 结束");     res.json({         say: "Hello World"     }); }); app.get("/test", (req, res, next) => {     console.log(2, "get 开始");     next();     console.log(2, "get 结束"); }); app.post("/test", (req, res, next) => {     console.log(3, "post 开始");     next();     console.log(3, "post 结束"); }); app.use("/test", (req, res, next) => {     console.log(4, "use 开始");     next();     console.log(4, "use 结束"); }); app.listen("1314", () => {     console.log("server is running on PORT 1314"); });

测试链接: `http://localhost:1314/test`,  输出:

1 2 3 4 5 6

1 'use 开始' 2 'get 开始' 4 'use 开始' 4 'use 结束' 2 'get 结束' 1 'use 结束'

• THEEND0123 #1

  middleware: slice.call.call(args), 多写了一个call

• THEEND0123 #2

  slice.call.call(args) 多写了一个call

• THEEND0123 #3

  执行顺序：
  1 use 开始
  4 use 开始
  2 get 开始
  2 get 结束
  4 use 结束
  1 use 结束

点开查看后面1条评论

Answer 2

双越 2019-06-22 17:22:32

感谢反馈，很赞。可以发到 qq 群分享一下。