在前端领域中，随着微服务架构的火热，BFF（Backend for Frontend）已经成为了前后端分离架构中不可或缺的一部分。BFF 的作用是对前端提供一层 API 网关，对后端的各种接口进行聚合、重组、过滤等操作，从而为前端提供更好的使用体验。在本文中，我们将介绍基于 Fastify 框架实现 BFF 的案例分享，让我们一起来深入了解一下吧。
Fastify 框架简介
Fastify 是一个高度专注于性能的 Node.js Web 框架，它是由 Node.js 核心贡献者 Matteo Collina 创建的一个全新的 Web 应用框架，其设计目标是最大限度地提高 Node.js 的性能和开发效率。特点如下：
- 极高的性能：Fastify 在性能上做出了非常大的优化，具有极高的性能和吞吐量。
- 低侵入性设计：Fastify 尽量减少在你的应用程序中的侵入性。Fastify 不会限制您可以使用的库或工具。
- 插件体系：Fastify 的插件体系非常易于使用，并且所有正式发布的插件都有很好的文档支持。
- 支持异步：Fastify 框架旨在与异步编程一起使用，并支持 async/await 语法。
BFF 开发案例
下面我们就来介绍一下如何基于 Fastify 框架实现 BFF 开发。
创建 Fastify 应用
首先，我们需要使用 npm 初始化一个 Node.js 项目，并安装 Fastify 框架依赖。
--- ---- -- --- ------- -------
接着，在项目的根目录下创建一个 index.js 文件。在此文件中，我们需要导入 Fastify 并创建一个 Fastify 应用。
----- ------- - ---------------------
-------------------- ----- -------- -- -
-- ----- -
-------------------
----------------
-
------------------- --------- -- -------------
---我们通过 fastify() 方法创建一个 Fastify 应用，并将其存储在 fastify 常量中。接着，我们通过 fastify.listen() 启动应用并监听 3000 端口，并在控制台中输出启动信息。
运行以下命令启动应用：
---- --------
当应用成功启动时，控制台中将输出 Server listening on ... 的信息。
创建 BFF 接口和代理接口
接下来，我们需要创建一个 BFF 接口和一个代理接口。我们将通过 BFF 接口聚合代理接口，从而为前端提供一层 API 网关。
首先，我们需要安装用于发起请求的 axios 库。
--- ------- -----
然后，我们在 index.js 中定义一个 /bff 接口，该接口将调用一个代理接口，并聚合其返回值。
----- ----- - -----------------
------------------- ----- --------- ------ -- -
----- ---- - ----- ----------------------------------------
----- ---- - ----- ----------------------------------------
----- ---- - ----- ----------------------------------------
----- ------ - -
------ ----------
------ ----------
------ ---------
--
-------------------
---我们通过 fastify.get() 方法定义了一个 GET 请求的 /bff 接口，并定义了其回调函数。在回调函数中，我们使用 axios 库发起了三个代理请求，并聚合了它们的返回值。最后，我们将聚合后的结果返回给前端。
此时，我们还需要启动一个代理服务。我们在代理服务中定义了三个接口 /api1、/api2 和 /api3。这里我们使用 json-server 这个库模拟一个 RESTful API 服务。
首先，我们需要在项目的根目录下创建一个 db.json 文件。
-
-------- -
------ -- -------- -------------- --------- ------------
------ -- -------- -------- ------ --------- -------- ------
--
----------- -
------ -- ------- ----- --------- --------- --
--
---------- -------- -----------
-然后，我们需要在 package.json 中定义一个名为 api 的脚本，并安装 json-server 和 nodemon 库依赖。
---------- - ------ ------------ ------- ------ ------ -------- -------- --------- -- --- --- ------- ----------- -------
最后，我们运行以下命令启动代理服务。
--- --- ---
此时，我们访问 http://localhost:3001/posts 接口，将会得到一些数据。
现在，我们重新运行 node index.js 启动我们的 BFF 服务，在浏览器中访问 http://localhost:3000/bff 接口，即可得到如下的结果。
-
-------- -
---------------------------------------------------
------------------------ ----------------------- ------
--
-------- -
-------------------- --------------------
--
-------- -
------- ----------
-
-使用插件管理
Fastify 的插件体系非常易于使用，并且所有正式发布的插件都有很好的文档支持。使用插件可以使我们的代码更加简洁有力，并兼顾性能和可维护性。
比如，我们可以使用 fastify-url-data 插件来解析 URL 参数以及请求体数据。只需要运行以下命令安装即可。
--- ------- ----------------
然后，在 index.js 中使用该插件，并对 /bff 接口进行了改进。
----- -------------- - ----------------------------
---------------------------------
----------------------- ----- --------- ------ -- -
----- -- - ------------------
----- ---- - ----- -----------------------------------------------
----- ---- - ----- ---------------------------------------------------------
----- ------ - -
----- ----------
--------- ---------
--
-------------------
---我们使用 fastify.register() 方法注册 fastify-url-data 插件，然后将 /:id 参数放置在 /bff 接口的路径中。接着，在回调函数中使用 request.params.id 获取 id 参数的值，并将其拼接在代理接口的路径中。最终得到的 URL 为 http://localhost:3001/posts/:id 和 http://localhost:3001/comments?postId=:id。我们使用 axios 库发起这两个代理请求，并将其返回值聚合在一起。
此时，我们访问 http://localhost:3000/bff/1 接口，将会得到如下的结果。
-
------- -
----- --
-------- --------------
--------- ----------
--
----------- -
-
----- --
------- ----- ---------
--------- -
-
-
-总结
本文介绍了基于 Fastify 框架实现 BFF 的开发案例，通过该案例我们深入了解了 Fastify 框架的核心特性，并且掌握了如何使用各种插件来实现 BFF 的开发。希望本文对您有所启发，也希望它能够成为您学习和实践 BFF 开发的参考之一。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c373bc83d39b4881779195