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