JavaScript 中怎么用 Fetch API 获取并处理二进制 ArrayBuffer 数据-js教程-PHP中文网

用 fetch 获取二进制数据需显式调用 response.arraybuffer()，返回 promise 解析为 arraybuffer；再转 uint8array、blob 或 base64 使用，注意 content-type 与 cors 限制，禁用 json()/text()。

javascript 中怎么用 fetch api 获取并处理二进制 arraybuffer 数据

用 fetch 获取二进制数据（如图片、音频、PDF 等）时，需显式调用 response.arrayBuffer()，不能依赖默认的 JSON 或文本解析。关键在于设置正确的响应类型处理方式，并注意后续如何使用 ArrayBuffer。

明确指定响应类型为 ArrayBuffer

Fetch 默认不会自动将响应转为 ArrayBuffer，必须手动调用 arrayBuffer() 方法。它返回一个 Promise，解析后得到原始二进制数据：

fetch('/image.png')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.arrayBuffer(); // ? 关键：主动请求 ArrayBuffer
  })
  .then(buffer => {
    console.log(buffer.byteLength); // 如：12456（字节大小）
    // 后续可转为 Uint8Array、Blob 等
  })
  .catch(err => console.error('Fetch failed:', err));

把 ArrayBuffer 转成常用格式以便使用

ArrayBuffer 本身不可直接读写，通常要包装成视图（如 Uint8Array）或封装为 Blob：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

转为 Uint8Array（适合逐字节操作）：const uint8 = new Uint8Array(buffer);
转为 Blob（适合下载或创建 URL）：const blob = new Blob([buffer], { type: 'image/png' }); const url = URL.createObjectURL(blob);
转为 Base64（慎用，大文件会内存暴涨）：先转 Uint8Array，再用 btoa(String.fromCharCode(...))（仅适用于小数据）

注意 Content-Type 和跨域限制

服务端返回的 Content-Type 不影响前端解析方式，但会影响 CORS 行为。若需访问响应头（如判断类型），确保服务端设置了 Access-Control-Expose-Headers: Content-Type。另外，二进制响应不支持 response.json() 或 response.text()，混用会报错。

完整示例：下载并预览 PNG 图片

结合错误处理与 Blob URL 创建，实现安全加载：

async function loadBinaryImage(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const buffer = await response.arrayBuffer();
    const blob = new Blob([buffer], { type: 'image/png' });
    const imageUrl = URL.createObjectURL(blob);

    const img = new Image();
    img.onload = () => URL.revokeObjectURL(imageUrl); // 用完及时释放
    img.src = imageUrl;
    document.body.appendChild(img);
  } catch (err) {
    console.error('Failed to load image:', err);
  }
}