Express教程03：本身實現一個body-parser中間件

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

中間件的實現邏輯

咱們在使用body-parser時的用法以下：

server.use(bodyParser.json())
複製代碼

這個方法等價於：

server.use((req, res, next) => {
  // 處理數據代碼。
  ...

  // 處理完成後，交由下一級中間件處理。
  next()
})
複製代碼

也就是說，bodyParser.json()方法的返回值是一個處理數據的函數。

新建中間件

新建一箇中間件的js文件在/lesson03/libs/body-parser.js。

該模塊導出了一個處理數據的方法：

示例代碼：/lesson03/libs/body-parser.js

module.exports = (req, res, next) => {
  // 處理數據代碼。
  ...

  // 處理完成後，交由下一級中間件處理。
  next()
}
複製代碼

實現中間件代碼

因爲Express傳入的req參數中，還保留了原生node.js的屬性和方法，所以能夠使用data事件接收post傳入的數據。

const querystring = require('querystring')

module.exports = (req, res, next) => {
  let arr = []  // 接收數據的數組

  // 使用data事件接收數據
  req.on('data', (buffer) => {
    // 將數據保存在arr數組中
    arr.push(buffer)
  })

  // 數據接收完成後，將數據轉換爲對象格式，保存到req.body上，交由下一級中間件處理
  req.on('end', () => {
    // 將數據解析爲字符串
    let body = Buffer.concat(arr).toString()

    // 判斷是否Fetch請求數據
    if (req.headers['content-type'] === 'application/json') {
      // 處理Fetch請求數據
      body = JSON.parse(body)
    } else {
      // 處理表單提交數據
      body = querystring.parse(body)
    }

    // 將保存到req.body上
    req.body = body

    // 交由下一級中間件處理
    next()
  })
}
複製代碼

使用中間件

接下來，只要將bodyParser中間件引入，而後使用server.use(bodyParser)便可。

示例代碼：/lesson03/server.js

const express = require('express')

// 引入bodyParser中間件
const bodyParser = require('./libs/body-parser')

const server = express()

server.listen(8080)

server.get('/reg', (req, res, next) => {
  console.log(req.query)
  res.send({
    error: 0,
    data: req.query,
    msg: '註冊成功'
  })
})

// 使用bodyParser中間件
server.use(bodyParser)

server.post('/login', (req, res, next) => {
  console.log(req.body)
  res.send({
    error: 0,
    data: req.body,
    msg: '登錄成功'
  })
})

server.use(express.static('./static/'))

console.log(`Server started at 8080`)
複製代碼

啓動服務器後，訪問http://localhost:8080/index.html便可看到效果。