在前端领域中，随着微服务架构的火热，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 框架依赖。
npm init -y npm install fastify
接着，在项目的根目录下创建一个 index.js 文件。在此文件中，我们需要导入 Fastify 并创建一个 Fastify 应用。
-- -------------------- ---- -------
----- ------- - ---------------------
-------------------- ----- -------- -- -
-- ----- -
-------------------
----------------
-
------------------- --------- -- -------------
---我们通过 fastify() 方法创建一个 Fastify 应用，并将其存储在 fastify 常量中。接着，我们通过 fastify.listen() 启动应用并监听 3000 端口，并在控制台中输出启动信息。
运行以下命令启动应用：
node index.js
当应用成功启动时，控制台中将输出 Server listening on ... 的信息。
创建 BFF 接口和代理接口
接下来，我们需要创建一个 BFF 接口和一个代理接口。我们将通过 BFF 接口聚合代理接口，从而为前端提供一层 API 网关。
首先，我们需要安装用于发起请求的 axios 库。
npm install axios
然后，我们在 index.js 中定义一个 /bff 接口，该接口将调用一个代理接口，并聚合其返回值。
-- -------------------- ---- -------
----- ----- - -----------------
------------------- ----- --------- ------ -- -
----- ---- - ----- ----------------------------------------
----- ---- - ----- ----------------------------------------
----- ---- - ----- ----------------------------------------
----- ------ - -
------ ----------
------ ----------
------ ---------
--
-------------------
---我们通过 fastify.get() 方法定义了一个 GET 请求的 /bff 接口，并定义了其回调函数。在回调函数中，我们使用 axios 库发起了三个代理请求，并聚合了它们的返回值。最后，我们将聚合后的结果返回给前端。
此时，我们还需要启动一个代理服务。我们在代理服务中定义了三个接口 /api1、/api2 和 /api3。这里我们使用 json-server 这个库模拟一个 RESTful API 服务。
首先，我们需要在项目的根目录下创建一个 db.json 文件。
-- -------------------- ---- -------
-
-------- -
------ -- -------- -------------- --------- ------------
------ -- -------- -------- ------ --------- -------- ------
--
----------- -
------ -- ------- ----- --------- --------- --
--
---------- -------- -----------
-然后，我们需要在 package.json 中定义一个名为 api 的脚本，并安装 json-server 和 nodemon 库依赖。
"scripts": {
"api": "json-server db.json --port 3001",
"start": "nodemon index.js"
},
...
npm install json-server nodemon最后，我们运行以下命令启动代理服务。
npm run api
此时，我们访问 http://localhost:3001/posts 接口，将会得到一些数据。
现在，我们重新运行 node index.js 启动我们的 BFF 服务，在浏览器中访问 http://localhost:3000/bff 接口，即可得到如下的结果。
-- -------------------- ---- -------
-
-------- -
---------------------------------------------------
------------------------ ----------------------- ------
--
-------- -
-------------------- --------------------
--
-------- -
------- ----------
-
-使用插件管理
Fastify 的插件体系非常易于使用，并且所有正式发布的插件都有很好的文档支持。使用插件可以使我们的代码更加简洁有力，并兼顾性能和可维护性。
比如，我们可以使用 fastify-url-data 插件来解析 URL 参数以及请求体数据。只需要运行以下命令安装即可。
npm install fastify-url-data
然后，在 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