为什么需要bodyParser这个中间件（）为什么需要bodyParser这个中间件

前言 ? 好多天没有写关于JS开发的文章了，主要是最近的事情太多了，今天也不知道写啥好，然后注意到我们在写http服务的时候，通常直接用一个中间件body-parser够拿到我们post请求中传递的参数。
前端代码先来看一下我们的测试代码，
下面就是我们今天的页面代码，我这里直接给大家用html去写了，在这个页面我们引入了axios的一个cdn链接，然后加了一个点击按钮，点击按钮之后我们会向后端发送一个post请求，在请求头中我们添加了一个JSON数据传递到服务器端。

/* index.html */ Document - 锐客网body { width: 100vw; height: 100vh; background-color: #fff; }

后端代码我们再来看一下后端代码；
服务端这边我就用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 = https://www.it610.com/article/[]; let size = 0; req.on('data', data => { console.log('data: ', data instanceof Buffer) chunkData.push(data); size += data.length; })req.on('end', () => { const data = https://www.it610.com/article/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属性，打印出来可以看到是我们前端传递的数据参数。
【为什么需要bodyParser这个中间件（）】大家如果感兴趣的话也可以去看一下body-parser这个中间件的源码，这里就不给大家去贴源码了
总结马上不是要2022了嘛，最近手里的工作也比较多，所以说文章更新可能会降低下频率，如果写的内容有错的，也欢迎大家积极留言，感谢各位大佬赏脸！