使用 response.arrayBuffer() 方法可以从 Fetch API 请求的响应中获取二进制数据，并将其转换为 ArrayBuffer 对象。这种数据格式通常用于处理图像、音频、视频等二进制文件。本章将详细介绍如何使用 response.arrayBuffer() 方法来处理这些类型的响应。
获取二进制数据
response.arrayBuffer() 方法返回一个 Promise，该 Promise 在解析时会提供一个 ArrayBuffer 对象。下面是一个简单的示例，展示了如何从服务器获取图像并将其转换为二进制数据：
-- -------------------- ---- -------
--------------------------------------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ -----------------------
--
------------ -- -
------------------ ------- --------
-- ----------
--
------------ -- -
-------------------- --- ---- - ------- ---- ---- ----- ------------ -------
---处理 ArrayBuffer 数据
获取到的 ArrayBuffer 对象可以进一步处理，例如将其转换为其他格式或直接传递给需要二进制数据的函数。以下是一些常见的处理方法：
转换为 Blob 对象
你可以将 ArrayBuffer 对象转换为 Blob 对象，以便进一步操作或存储：
fetch('https://example.com/image.png')
.then(response => response.arrayBuffer())
.then(buffer => {
const blob = new Blob([buffer], { type: 'image/png' });
console.log('Blob object:', blob);
// 可以将 Blob 对象保存到本地或传递给其他函数
});转换为 Data URL
你也可以将 ArrayBuffer 对象转换为 Data URL，这是一种可以直接嵌入到 HTML 或 CSS 中的格式：
-- -------------------- ---- -------
--------------------------------------
-------------- -- -----------------------
------------ -- -
----- ----- - --- -------------------
--- ------ - ---
--- ---- - - -- - - ------------- ---- -
------ -- ------------------------------
-
----- ------- - ----------------------------------------
----------------- ------ ---------
-- ----- ---- --- --- --- ---
---使用 ArrayBuffer 的实际场景
显示图像
你可以将获取到的图像数据直接显示在页面上：
<img id="image" src="" alt="Fetched Image">
-- -------------------- ---- -------
--------------------------------------
-------------- -- -----------------------
------------ -- -
----- ----- - --- -------------------
--- ------ - ---
--- ---- - - -- - - ------------- ---- -
------ -- ------------------------------
-
----- ------- - ----------------------------------------
------------------------------------ - --------
---下载文件
你可以创建一个下载链接，让用户下载获取到的文件：
<a id="downloadLink" href="#">Download</a>
fetch('https://example.com/document.pdf')
.then(response => response.arrayBuffer())
.then(buffer => {
const blob = new Blob([buffer], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
document.getElementById('downloadLink').href = url;
document.getElementById('downloadLink').download = 'document.pdf';
});错误处理
由于 response.arrayBuffer() 返回的是一个 Promise，因此你需要处理可能发生的错误。例如，网络请求失败或响应不是预期的类型时，应该捕获并处理这些错误：
-- -------------------- ---- -------
--------------------------------------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ -----------------------
--
------------ -- -
-- -------
--
------------ -- -
-------------------- --- ---- - ------- ---- ---- ----- ------------ -------
---通过以上步骤，你可以灵活地使用 response.arrayBuffer() 方法来处理各种二进制数据，满足不同的应用场景需求。