随着前端技术的快速发展，许多 Web 应用程序都遇到了需要实时获取二进制文件的需求。例如，音频和视频数据在大多数情况下都需要以二进制格式传输，这需要在前端代码中使用 GraphQL 进行数据请求时的特定处理。
在本文中，我们将探讨如何在 GraphQL 中请求和响应二进制数据，并提供详细的学习和指导意义。
GraphQL 中的二进制文件
在本文中，我们将讨论如何在 GraphQL 中处理二进制文件，这包括图像、音频和视频等不可读文本。在大多数情况下，这些文件需要作为二进制数据传输。在传输和接收这些数据时，您需要知道它们的 MIME 类型。以下是一些常见的 MIME 类型：
- 图像：image/png, image/jpeg, image/gif
- 音频：audio/mp3, audio/wav, audio/mpeg
- 视频：video/mp4, video/ogg, video/webm
了解 MIME 类型是处理二进制数据时非常重要的，因为它们告诉您如何解析响应并正确处理文件。
从 GraphQL API 中获取二进制文件
在 GraphQL API 中获取二进制文件的关键是使用适当的响应类型。在许多情况下，您需要使用 application/octet-stream MIME 类型，这是一个通用的 MIME 类型，适用于不属于其他类型的数据。
以下是一个示例查询，其中 downloadUrl 字段将返回一个文件的二进制数据：
----- -
-------------------- --------------------------------- -
----
----
-
-在上面的查询中，getFile 会返回一个包含二进制数据的对象，并指定数据的 MIME 类型。
对于文件的下载和解析，您可以使用 fetch API 从 GraphQL API 中获取响应，并使用下面的代码将其解析为二进制数据：
--------------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ ---------------------- --------------------------------- ------------- --
--
---------------- -- ----------------
------------ -- -
-- -------
---在上面的代码中，我们使用解析响应的 blob() 方法将响应转换为二进制数据，并继续处理它。
使用 mutations 上传二进制文件
在许多情况下，您需要在 GraphQL API 中上传二进制文件。为了上传文件，GraphQL 提供了 mutations。
以下是一个示例 mutation，用于向服务器上传一个带有二进制数据的文件：
-------- -
---------------- -
----- ------------
----- -----------
----- --------------------------
-- -
---
-
-在上面的 mutation 中，我们使用 uploadFile 将二进制文件上传到服务器，并指定文件的名称、类型和二进制数据。服务器将响应一个包含 URL 的对象，指向刚上传的文件。
要完成上传，可以使用以下 JavaScript 代码：
----- ---- - --- ---------- ------------- - ----- ----------- ---
--------------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ --------- ----------------- - ----- ------------- ----- ------------ ----- -------------------------- -- ------- --
--
---------------- -- ----------------
------------ -- -
----- --- - --------------------
----- -------- - --- -----------
----------------------- ------
---------- -
------- ------
----- --------
--
---------------- -- -
-- ----
---
---在上面的代码中，我们创建了一个 File 对象，将其包装在提交表单的 FormData 中，使用上传文件的 URL 初始化了一个新的 fetch 请求，并告诉服务器使用 PUT 方法传输数据。服务器将响应上传的文件，并根据需要进行处理。
结论
使用 GraphQL 处理二进制文件需要特殊的处理和理解 MIME 类型。本文中提供了许多示例代码和指导，可帮助您了解如何使用 GraphQL 有效地传输和处理二进制数据。请记住，正确处理 MIME 类型是确保文件正确传输和处理的关键。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719a362ad1e889fe2321832