在前端开发中，数据通常是以 JSON 格式传输的，但是对于大量的数据或者数据结构复杂的情况下，我们可能需要使用 Protocol Buffers 来进行数据交换。而 @protobufjs/fetch 包就是一个基于 fetch 操作的 Protocol Buffers 数据解析工具。
安装
使用 @protobufjs/fetch 包之前需要先安装以下依赖：
- protobufjs：Protocol Buffers 的 JavaScript 实现
- @protobufjs/aspromise：将 Protocol Buffers 数据转换为 Promise 格式
- node-fetch：fetch 的 Node.js 实现
使用 npm 安装：
npm install protobufjs @protobufjs/aspromise node-fetch @protobufjs/fetch
基本用法
1. 引入
import protobuf from "protobufjs";
import { fetch as protobufFetch } from "@protobufjs/fetch";2. 创建类
-- -------------------- ---- -------
----- ---- - ------------------------
------- -
------------- -
------- -
----- -
----- ---------
--- --
--
---- -
----- --------
--- --
--
--
--
--
---
----- ------------ - --------------------------------3. 解析数据
const response = await protobufFetch("/api/hello-world");
const message = HelloMessage.decode(response.data);decode 方法会解析传入的二进制数据，并返回解析后的 JavaScript 对象。
实际应用
1. 在前端发送请求
-- -------------------- ---- -------
----- ------- - ----- -- -- -
--- -
----- ----------- - ---------------------
----- ------
---- ---
------------
----- -------- - ----- ------------------------- -
------- -------
-------- -
--------------- ---------------------------
--
----- ------------
---
----- ------- - --------------------
----- ----------------------
--
- ----- ------- -
---------------------
-
--需要注意的是，使用 Protocol Buffers 进行数据交换时发送请求的 header 必须是 application/octet-stream。
2. 在后端解析数据
以下是一个基于 Node.js 的后端代码示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------- - ----------------------
----- --- - ----------
----- ---- - -----
----- ---- - ------------------------
------- -
------------- -
------- -
----- -
----- ---------
--- --
--
---- -
----- --------
--- --
--
--
--
--
---
----- ------------ - --------------------------------
-----------------------
---------------------------- ----- ---- -- -
----- ------- - ------------------------------
---------------------
---------------- - - ------------ - -----
---
---------------- -- -- -
---------------- --------- -- ---------------------------
---在后端代码中，使用 express.raw() 中间件来处理接收到的二进制数据，然后使用 decode 方法解析数据。
总结
@protobufjs/fetch 包是一个基于 fetch 操作的 Protocol Buffers 数据解析工具。使用它可以方便地进行 Protocol Buffers 数据的发送和接收，并且可以在前端和后端共同使用。在实际开发中，需要注意请求的 header 必须是 application/octet-stream，否则会出现解析不了的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/protobufjs-fetch