关于javascript:为什么需要bodyParser这个中间件

10次阅读

共计 3050 个字符，预计需要花费 8 分钟才能阅读完成。

好多天没有写对于 JS 开发的文章了，次要是最近的事件太多了，明天也不晓得写啥好，而后留神到咱们在写 http 服务的时候，通常间接用一个中间件 body-parser 够拿到咱们 post 申请中传递的参数。

先来看一下咱们的测试代码，

上面就是咱们明天的页面代码，我这里间接给大家用 html 去写了，在这个页面咱们引入了 axios 的一个 cdn 链接，而后加了一个点击按钮，点击按钮之后咱们会向后端发送一个 post 申请，在申请头中咱们增加了一个 JSON 数据传递到服务器端。

/* index.html */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    body {
      width: 100vw;
      height: 100vh;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <button onclick="handlePost()"> 发送数据 </button>

  <script>
    function handlePost() {
      axios.post('/data', {
        name: 'TT',
        age: '25'
      }).then((data) => {console.log(data)
      }).catch((error) =>{console.error(error)
      })
    }
  </script>
</body>
</html>

咱们再来看一下后端代码；

服务端这边我就用 express 模块间接搭建一个简略的服务，而后这里增加一个 post 的申请路由，

这里能够看到并没有退出 body-parser 中间件，

先间接给大家打印一下申请对象中是否存在 body 属性，再打印一下 body 属性值（如果存在的话）, 最初不能忘了给申请一个响应。

/* app.js */

const express = require('express');
const path = require('path')
const app = express();
app.use(express.static(path.join(__dirname)));

app.post('/data', (req, res) => {console.log(Object.keys(req).includes('body'), req.body)
  res.send('success')
})

app.listen(3000, '127.0.0.1', () => {console.log(`Server running at http://127.0.0.1:3000`)
});

间接看一下打印后果

从打印后果来看此时咱们的申请对象中是没有 body 属性的，那咱们如何可能拿到传递的数据呢？

咱们都晓得咱们个别发动 post 类型的网络申请，申请数据会放在 body 外面，然而下面的打印中咱们并没有从申请对象中拿到咱们的 body，因为这边的话，咱们的body 数据是通过数据流的模式传递到咱们的服务器的，然而咱们的传输数据是放在 body 中的，那咱们这里就必须通过接管流来拿到咱们的数据，大家再看一下咱们通过接管数据流后的代码。

/* app.js */

const express = require('express');
const path = require('path')
const app = express();
app.use(express.static(path.join(__dirname)));

app.post('/data', (req, res) => {console.log(Object.keys(req).includes('body'), req.body)

  const chunkData = [];
  let size = 0;
  req.on('data', data => {console.log('data:', data instanceof Buffer)
    chunkData.push(data);
    size += data.length;
  })

  req.on('end', () => {const data = Buffer.concat(chunkData, size)
    console.log('end:', size, data.toString());
    res.send('success')
  })
})

app.listen(3000, '127.0.0.1', () => {console.log(`Server running at http://127.0.0.1:3000`)
});

我这里在服务端的 post 申请路由回调中，通过监听了申请对象的 data 和end事件，在 data 事件中接管通过流传递过来的 body 数据，而后在接管完数据之后在 end 事件中将数据流合并，而后通过字符串的模式打印进去，咱们再来看一下打印后果。

大家能够看到咱们在 data 事件中拿到的数据类型确实是流数据，并且咱们在接管完所有的数据流后，在 end 事件中通过字符串类型将数据打印了进去，这时候咱们能够看到咱们通过页面向服务传递的 JSON 数据被胜利的打印进去。

阐明咱们能够通过流的模式去接管到前端 post 申请传递过去的数据，然而每次都这样解决必定是很麻烦的，所以说咱们个别间接通过 body-parser 中间件对咱们的 post 申请的数据流进行解决。

那么到这里大家应该也可能晓得咱们的 body-parser 中间件做的工作是什么样的，当然，这里我只是给大家演示了一下根底的内容，然而在中间件中，理论还是有很多状况须要解决的，

最初咱们装置一下 body-parser 这个中间件再看一下成果，

/* app.js */
const express = require('express');
const path = require('path')
const app = express();
const bodyParser = require('body-parser');
app.use(express.static(path.join(__dirname)));
app.use(bodyParser.json());

app.post('/data', (req, res) => {console.log(Object.keys(req).includes('body'), req.body)
  res.send('success')
})

app.listen(3000, '127.0.0.1', () => {console.log(`Server running at http://127.0.0.1:3000`)
});

大家能够看到应用了 body-parser 中间件之后，咱们的申请对象中就多了一个 body 属性，打印进去能够看到是咱们前端传递的数据参数。

大家如果感兴趣的话也能够去看一下 body-parser 这个中间件的源码，这里就不给大家去贴源码了

马上不是要 2022 了嘛，最近手里的工作也比拟多，所以说文章更新可能会升高下频率，如果写的内容有错的，也欢送大家踊跃留言，感激各位大佬赏脸！

正文完