在前端开发中，处理表单数据是一个常见的任务。而这个任务有时候可能需要处理一些比较复杂、嵌套的数据结构。Npm 上有一个叫做 parse-form 的包，可以用来方便地处理这样的数据。
前置知识
在学习 parse-form 之前，你需要对以下内容有一定的了解：
- Node.js 和 npm 的基础知识
- POST 表单提交的基础知识
- JavaScript 对象和数组的基础知识
安装 parse-form
使用 npm 安装 parse-form：
npm install --save parse-form
使用 parse-form
parse-form 提供了一个函数 parseForm，该函数接受一个 Node.js 的 http.IncomingMessage 对象作为参数，返回一个 Promise。Promise 的解析值是一个对象，表示解析得到的表单数据。
以下是一份示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ----------------------
----- ------ - ----------------------- ----- ---- -- -
-- ----------- --- ------- -
----- ---- - ----- ---------------
------------------
-
------------------ - --------------- ------------ ---
-------------- -----------
---
----- ---- - -----
------------------- -- -- -
------------------- ------- -- ----------------------------
---在这段代码中，我们首先创建了一个 HTTP 服务器，并在收到 POST 请求时调用 parseForm 函数解析表单数据。解析得到的数据会打印到控制台上，供测试用。
输入数据格式
下面让我们看一下 parseForm 函数解析的输入数据应该是什么样子的。
application/x-www-form-urlencoded
如果表单数据的 Content-Type 头字段是 application/x-www-form-urlencoded，也就是常见的表单提交方式，那么输入数据应该是一个字符串，形如：
foo=1&bar=hello%20world&nested[a]=1&nested[b][c]=2
这个字符串表示了一个类似于以下 JavaScript 对象的数据结构：
-- -------------------- ---- -------
-
---- ----
---- ------ -------
------- -
-- ----
-- -
-- ----
--
--
-multipart/form-data
如果表单数据的 Content-Type 头字段是 multipart/form-data，则输入数据是一个对象，包含以下属性：
fields：一个对象，表示表单字段。每个属性名是字段的名称，每个属性值是字段的值。files：一个数组，表示上传的文件。每个元素都是一个对象，包含以下属性：name：文件名。type：文件类型。data：文件内容的二进制数据。
下面是一个示例：
-- -------------------- ---- -------
-
------- -
---- ----
--
------ -
-
----- ------------
----- -------------
----- ------- -- -- -- -- -- ----
--
--
-输出数据格式
parseForm 函数的返回值是一个 Promise。Promise 解析得到的数据结构与输入数据相同，不同的是它会：
- URL 解码字段和数组元素的值
- 将数组按照
[n]后缀展开为对象
以下是样例代码的输出结果：
-- -------------------- ---- -------
-
---- ----
---- ------ -------
------- -
-- ----
-- -
-- ----
--
--
-总结
使用 parse-form 包可以很方便地解析 POST 表单数据，并且支持多种输入数据格式。学会使用 parse-form 不仅可以提高开发效率，还可以让代码更加健壮和容错。此外，深入了解输入数据的格式和输出数据的规范也对理解 HTTP 协议的工作原理有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f156ea6403f2923b035c32c