在前端开发中，对接口请求的处理是一个很重要的环节。而对于处理传递的参数，特别是 POST 方法传参的处理，需要用到一个十分有用的 npm 包 — body-parser-graphql。它是一个非常轻量级的包，只有不到 1k 的大小，但是它能够轻松地解析 POST 请求中传递的参数，尤其是 GraphQL 的参数，让请求处理更加便捷高效。下面我们将为大家介绍如何在前端项目中使用 body-parser-graphql 包。
安装 body-parser-graphql
使用 npm 安装 body-parser-graphql 十分简单，只需要使用以下命令：
npm i body-parser-graphql --save
导入及使用 body-parser-graphql
在使用 body-parser-graphql 之前，我们需要先导入它。使用以下语句即可将 body-parser-graphql 导入到你的代码中：
const bodyParserGraphQL = require("body-parser-graphql");
接下来我们需要调用 body-parser-graphql 对象提供的中间件来解析请求参数。例如，在使用 GraphQL 工具 express-graphql 的情况下，你可以使用以下代码配置服务器来启用 body-parser-graphql 中间件：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----------- - --------------------------- ----- ----------------- - ------------------------------- ----- --- - ---------- ----------------------------- ------------------- ------------- ------- --------- ----- ----展开代码
这里我们使用了 express 框架，从而可以直接使用 app.use() 安装中间件。当请求到达服务器时，body-parser-graphql 解析 POST 请求中的参数，并将解析后的结果放在 req.body 中，供后续使用。因此，接下来我们可以通过 req.body 访问解析后的参数，如下所示：
app.post('/graphql', function(req, res) { const query = req.body.query; const variables = req.body.variables; const operationName = req.body.operationName; ... });
这里的 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 的信息：
{ name: "Jack", age: 25 }
body-parser-graphql 包的使用使得我们能够很方便地处理 Post 请求中的参数，尤其是 GraphQL 的参数。相信在实际开发中，使用 body-parser-graphql 不仅可以提高开发效率，同时也能让开发者应付各种复杂场景的数据传递，使得系统更加健壮稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae73b5cbfe1ea0610e4c
