node JS 中 express 中间件实现原理分析

灰太狼 2022-12-27 07:55 134阅读 0赞

#### 一、express ####

1.  `express` 中间件，如下所示：

*  `app.use` 用来注册中间件，先收集起来
 *  遇到 `http` 请求，根据 `path` 和 `method` 判断触发哪些
 *  实现 `next` 机制，即上一个通过 `next` 触发下一个

1.  `express` 中间件的实现内部原理，代码如下所示：

const http = require('http')
    const slice = Array.prototype.slice
    
    class LikeExpress { 
      constructor () { 
        // 存放中间件的列表
        this.routes = { 
          all: [], // app.use(...)
          get: [], // app.get(...)
          post: [] // app.post(...)
        }
      }
    
    
      register (path) { 
        const info = { }
        // 判断第一个参数是否是 string 类型
        if (typeof path === 'string') { 
          info.path = path
          // 从第二个参数开始，转换为数组，存入 stack
          info.stack = slice.call(arguments, 1)
        } else { 
          info.path = '/'
          // 从第一个参数开始，转换为数组，存入 stack
          info.stack = slice.call(arguments, 0)
        }
        return info
      }
    
    
      use () { 
        const info = this.register.apply(this, arguments)
        this.routes.all.push(info)
      }
    
    
      get () { 
        const info = this.register.apply(this, arguments)
        this.routes.all.push(info)
      }
    
    
      post () { 
        const info = this.register.apply(this, arguments)
        this.routes.all.push(info)
      }
    
    
      match (method, url) { 
        let stack = []
        if (url === '/favicon.ico') { 
          return stack
        }
    
        // 获取 routes 
        let cutRoutes = []
        cutRoutes = cutRoutes.concat(this.routes.all)
        cutRoutes = cutRoutes.concat(this.routes[method])
    
        cutRoutes.forEach(routeInfo => { 
          if (url.indexOf(routeInfo.path) === 0) { 
            // url === '/api/get-cookie' 且 routeInfo.path === '/'
            // url === '/api/get-cookie' 且 routeInfo.path === '/api'
            // url === '/api/get-cookie' 且 routeInfo.path === '/api/get-cookie'
            stack = stack.concat(routeInfo.stack)
          }
        })
        return stack
      }
    
      // 核心的 next 机制
      handle(req, res, stack) { 
        const next = () => { 
          // 拿到第一个匹配的中间件
          const middleware = stack.shift()
          if (middleware) { 
            // 执行中间件函数
            middleware(req, res, next)
          }
        }
        next()
      }
    
    
      callback () { 
        return (req, res) => { 
          res.json = (data) => { 
            res.setHeader('Content-type', 'application/json')
            res.end(JSON.stringify(data))
          }
    
          const url = req.url
          const method = req.method.toLowerCase()
          
          const resultList = this.match(method, url)
          this.handle(req, res, resultList)
        }
      }
    
    
      listen (...args) { 
        const server = http.createServer(this.callback())
        server.listen(...args)
      }
    }
    
    
    // 工厂函数
    module.exports = () => { 
      return new LikeExpress()
    }

1.  `express` 中间件原理的应用，代码如下所示：

const express = require('./like-express')
    
    
    // 本次 http 请求的实例
    const app = express()
    
    app.use((req, res, next) => { 
      console.log('请求开始...', req.method, req.url)
      next()
    })
    
    app.use((req, res, next) => { 
      // 假设在处理 cookie
      console.log('处理 cookie...')
      req.cookie = { 
        userId: 'abc123'
      }
      next()
    })
    
    
    app.use('/api', (req, res, next) => { 
      console.log('处理 /api 路由')
      next()
    })
    
    app.get('/api', (req, res, next) => { 
      console.log('处理 /api 路由')
      next()
    })
    
    app.post('/api', (req, res, next) => { 
      console.log('处理 /api 路由')
      next()
    })
    
    
    // 模拟登录验证
    function loginCheck(req, res, next) { 
      setTimeout(() => { 
        console.log('模拟登录成功')
        next()
      })
    }
    
    
    app.get('/api/get-cookie', loginCheck, (req, res, next) => { 
      console.log('get /api/get-cookie')
      res.json({ 
        errno: 0,
        data: req.cookie
      })
    })
    
    app.use((req, res, next) => { 
      console.log('处理 404')
      res.json({ 
        errno: -1,
        msg: '404 not found'
      })
    })
    
    
    app.listen(8000, () => { 
      console.log('server is running on port 8000')
    })