共计 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 了嘛，最近手里的工作也比拟多，所以说文章更新可能会升高下频率，如果写的内容有错的，也欢送大家踊跃留言，感激各位大佬赏脸！
