JavaScript 中 fetch 怎么处理返回的 ArrayBuffer 数据-js教程-PHP中文网

使用 fetch 获取 arraybuffer 数据需调用 response.arraybuffer() 方法，无需设置 responsetype；它返回 promise，适用于图片、音频等二进制内容处理，且同一 response 只能调用一次该方法。

javascript 中 fetch 怎么处理返回的 arraybuffer 数据

使用 fetch 获取 ArrayBuffer 数据，关键在于设置正确的响应类型，并用 response.arrayBuffer() 方法读取。它不会自动解析成字符串或 JSON，适合处理二进制内容（如图片、音频、文件下载、加密数据等）。

设置 `responseType` 为 `arraybuffer`？不，用 `response.arrayBuffer()`

注意：fetch 没有类似 XMLHttpRequest 的 responseType 属性。你只需调用 response.arrayBuffer() 即可获取 ArrayBuffer —— 这是 Promise 方法，返回一个解析为 ArrayBuffer 的 Promise：

不需要手动设置 header 或 responseType
确保服务器返回的是真实二进制数据（Content-Type 可为 application/octet-stream、image/png 等，但不是必须匹配）
如果后端返回的是 JSON 字符串却误调 arrayBuffer()，你会得到该字符串 UTF-8 编码后的 ArrayBuffer，需自行解码（见下文）

完整示例：获取并使用 ArrayBuffer

以下是一个典型流程，包括错误处理和后续操作：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

fetch('/api/data.bin')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.arrayBuffer(); // 返回 Promise<arraybuffer>
  })
  .then(buffer => {
    // ✅ buffer 是 ArrayBuffer 实例
    const view = new Uint8Array(buffer);
    console.log('前10字节:', view.slice(0, 10));

    // 例如：转成 Base64（适用于图片/文件预览）
    const base64 = btoa(String.fromCharCode(...view));
    document.getElementById('img').src = `data:image/png;base64,${base64}`;

    // 或：传给 WebAssembly、加密 API、FileReader 等
  })
  .catch(err => console.error('加载失败:', err));</arraybuffer>

常见转换需求与注意事项

拿到 ArrayBuffer 后常需进一步处理：

转字符串（如服务端返回 UTF-8 文本但你必须用 arrayBuffer）：用 TextDecoder 解码
const str = new TextDecoder().decode(buffer);

转 Blob 并下载文件：

const blob = new Blob([buffer], { type: 'application/pdf' });<br>
  const url = URL.createObjectURL(blob);<br>
  location.href = url;

避免内存泄漏：若长期持有大 buffer，记得适时释放引用；使用 slice() 创建子视图时注意是否复制数据（slice() 不复制，subarray() 也不复制）
流式处理大文件？ 目前 arrayBuffer() 是全量加载，不支持分块读取；如需流式，考虑 response.body.getReader() 配合 Uint8Array 流式读取