在前端开发中，对接口请求的处理是一个很重要的环节。而对于处理传递的参数，特别是 POST 方法传参的处理，需要用到一个十分有用的 npm 包 — body-parser-graphql。它是一个非常轻量级的包，只有不到 1k 的大小，但是它能够轻松地解析 POST 请求中传递的参数，尤其是 GraphQL 的参数，让请求处理更加便捷高效。下面我们将为大家介绍如何在前端项目中使用 body-parser-graphql 包。
安装 body-parser-graphql
使用 npm 安装 body-parser-graphql 十分简单，只需要使用以下命令：
--- - ------------------- ------
导入及使用 body-parser-graphql
在使用 body-parser-graphql 之前，我们需要先导入它。使用以下语句即可将 body-parser-graphql 导入到你的代码中：
----- ----------------- - -------------------------------
接下来我们需要调用 body-parser-graphql 对象提供的中间件来解析请求参数。例如，在使用 GraphQL 工具 express-graphql 的情况下，你可以使用以下代码配置服务器来启用 body-parser-graphql 中间件：
----- ------- - -------------------
----- ----------- - ---------------------------
----- ----------------- - -------------------------------
----- --- - ----------
-----------------------------
------------------- -------------
-------
--------- -----
----这里我们使用了 express 框架，从而可以直接使用 app.use() 安装中间件。当请求到达服务器时，body-parser-graphql 解析 POST 请求中的参数，并将解析后的结果放在 req.body 中，供后续使用。因此，接下来我们可以通过 req.body 访问解析后的参数，如下所示：
-------------------- ------------- ---- -
----- ----- - ---------------
----- --------- - -------------------
----- ------------- - -----------------------
---
---这里的 req.body.query、req.body.variables、req.body.operationName 分别对应着 POST 请求中的 query、variables、operationName 字段。
使用场景示例
以上是 body-parser-graphql 的基本用法，下面将通过一个实例来介绍如何在项目中应用。
首先，我们新建一个 express 项目，并安装 body-parser-graphql 包。接着我们需要搭建一个 GraphQL 的后端服务，使用 GraphQL 的一个重要原因就是可以根据不同的场景动态返回不同的数据集合。以下是一个使用 GraphQL 查询数据的示例：
----- ------- - -------------------
----- ----------- - ---------------------------
----- ----------------- - -------------------------------
----- - ----------- - - -------------------
----- --- - ----------
-- -----------
----- ------ - -------------
---- ----- -
------ ------
---------- --------- ----
-
---- ---- -
----- ------
---- ---
-
---
-- ----
----- ---- - -
------ -- -- -
------ ------ --------
--
----- -- ---- -- -- -
------ - ----- ---- ------------------------ - --- -
-
--
-- -- ------------------- ---
-----------------------------
-- -- ------- ----
------------------- -------------
-------
---------- -----
--------- -----
----
---------------- -- -- ---------------------- -- --------接下来，在前端项目中，我们可以使用 axios 发起 POST 请求，请求 body 中包含 GraphQL 的查询语句，如下所示：
----- ----- - -----------------
---------------------- -
------ -
-
---------- ------- -
-----
---
-
-
-
--
----------- -- -
----- ---- - ---------
---------------------------- -- - ----- ------- ---- -- -
--
------------ -- ------------------当我们发送 POST 请求到后端服务时，axios 将请求参数封装到请求体中，同时也包含了 body-parser-graphql 对请求参数的解析操作。在后端服务中，我们实现了查询 user 的接口，并且将查询结果作为响应数据返回给前端。最终输出了 user 的信息：
- ----- ------- ---- -- -
body-parser-graphql 包的使用使得我们能够很方便地处理 Post 请求中的参数，尤其是 GraphQL 的参数。相信在实际开发中，使用 body-parser-graphql 不仅可以提高开发效率，同时也能让开发者应付各种复杂场景的数据传递，使得系统更加健壮稳定。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedae73b5cbfe1ea0610e4c