在 Web 开发中，处理网络请求是至关重要的。Fetch API 提供了一种现代的方式来发起 HTTP 请求，并且比 XMLHttpRequest 更加强大和灵活。尽管 Fetch API 并没有直接提供 request.bytes() 方法，但我们可以通过其他方式来获取请求体的字节数据。
使用 FormData 对象
如果你需要处理表单数据，可以使用 FormData 对象。虽然它本身并不直接提供字节数据，但你可以将它转换为 Blob 或者 ArrayBuffer 来获取原始字节数据。
示例代码
-- -------------------- ---- -------
----- -------- - --- -----------
--------------------------- ---------------
--------------------------- ---------------
-- - -------- --- ----
----------------------- -- -
----- ------ - --- -------------
-------------------------------
---------------- - -------- -- -
----- ----------- - --------------
------------------------- -- ----------- --
--
---使用 Blob 对象
Blob 对象表示一个不可变的、原始数据的类文件对象。你可以使用它来存储二进制数据，例如图像或音频文件。
示例代码
-- -------------------- ---- -------
----- ---- - --- ------------- --------- - ----- ------------ ---
----- ------ - --- -------------
-------------------------------
---------------- - -------- -- -
----- ----------- - --------------
------------------------- -- ----------- --
--使用 ArrayBuffer 对象
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。你可以通过 ArrayBuffer 获取到字节数据。
示例代码
-- -------------------- ---- -------
----- ------ - --- --------------- -- -------------------
----- ---- - --- ------------------- -- -------------
------- - --- -- -------- ---
------- - --- -- -------- ---
------------------ -- ------------- - --- -- -
-- -- ----- -- ----------- --
------------------------------------- -
------- -------
-------- -
--------------- --------------------------
--
----- ------
---使用 ReadableStream 对象
ReadableStream 是一种用于表示异步读取的数据源的对象。它非常适合处理流式数据，如大文件上传或实时数据流。
示例代码
-- -------------------- ---- -------
----- ------ - --- ----------------
----------------- -
---------------------- ---------------------------- ----------
-------------------
-
---
------------------------------------- -
------- -------
-------- -
--------------- ------------
--
----- ------
---处理响应体的字节数据
当处理响应体时，你可以使用 Response.arrayBuffer() 方法来获取字节数据。
示例代码
fetch('https://example.com/api/data')
.then(response => response.arrayBuffer())
.then(arrayBuffer => {
console.log(arrayBuffer); // ArrayBuffer 对象
})
.catch(error => console.error('Error:', error));总结
尽管 Fetch API 没有直接提供 request.bytes() 方法，但你可以通过多种方式来获取和处理请求体及响应体的字节数据。这些方法包括使用 FormData、Blob、ArrayBuffer 和 ReadableStream 等对象。通过这些工具，你可以有效地处理各种类型的二进制数据，从而增强你的前端应用功能。