为什么需要bodyParser这个中间件？

最新推荐文章于 2024-04-16 07:47:44 发布

灵感桌面

最新推荐文章于 2024-04-16 07:47:44 发布

阅读量550

点赞数 1

分类专栏：笔记技术分享强大的JavaScript 文章标签：中间件前端 javascript

本文链接：https://blog.csdn.net/lixiaocheng1983/article/details/122026552

版权

技术分享同时被 3 个专栏收录

37 篇文章 9 订阅

订阅专栏

笔记

21 篇文章 0 订阅

订阅专栏

强大的JavaScript

2 篇文章 0 订阅

订阅专栏

前言

好多天没有写关于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了嘛，最近手里的工作也比较多，所以说文章更新可能会降低下频率，如果写的内容有错的，也欢迎大家积极留言，感谢各位大佬赏脸！

灵感桌面

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为什么需要bodyParser这个中间件？

前言好多天没有写关于JS开发的文章了，主要是最近的事情太多了，今天也不知道写啥好，然后注意到我们通常在写http服务的时候，通常我们直接用一个中间件body-parser才能够拿到我们post请求中传递的参数。看过我之前文章的都知道，爱智应用后端服务开发也是用的JS开发，在JSRE中也提供了同样的一个中间件模块，今天因为刚好不在家，旁边也没有爱智去给大家去测试一下，不过原理应该都是一样的，那今天就用一个node.js服务给大家看一下为什么需要用body-parser这样一个模块？不用b
复制链接

扫一扫