核心是调用response.arrayBuffer()或response.blob()显式解析二进制响应体，前者返回可逐字节操作的ArrayBuffer，后者适合下载或预览；需配合Uint8Array、DataView等进一步处理文件头、格式解析或流式读取。
JavaScript 中使用 Fetch API 解析二进制文件流数据，核心是把响应体转为 ArrayBuffer、Blob 或 Uint8Array 等原生二进制类型，再按需处理（如解码图片、解析音频头、读取 ZIP 结构等）。默认情况下 fetch 返回的 Response 对象不会自动解析二进制内容，必须显式调用对应方法。
获取二进制数据：用 arrayBuffer() 或 blob()
这是最常用且安全的方式。`arrayBuffer()` 返回底层字节的只读视图，适合需要逐字节操作或传给 WebAssembly/Canvas/Web Audio 的场景；`blob()` 更轻量，适合下载、预览或后续用 `FileReader` 处理。
示例：加载一个 PNG 文件并获取其原始字节
fetch('/image.png')
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.arrayBuffer(); // 或 response.blob()
})
.then(buffer => {
const uint8Array = new Uint8Array(buffer);
console.log('前 10 字节:', uint8Array.slice(0, 10)); // 查看文件头（PNG 是 89 50 4E 47）
})
.catch(err => console.error(err));
流式读取大文件：配合 response.body 和 ReadableStream
对于超大文件（如视频、模型权重），避免一次性加载全部到内存，可用 `response.body.getReader()` 分块读取。注意：`body` 只能读一次，且需手动处理 Uint8Array 块。
立即学习“Java免费学习笔记（深入）”；
- 设置
cache: 'no-cache'防止浏览器缓存干扰流式行为 - 用
reader.read()循环读取，直到{ done: true } - 每块
value是Uint8Array，可直接处理或拼接
示例：边下载边校验 SHA-256（需配合 crypto.subtle）
fetch('/large.bin', { cache: 'no-cache' })
.then(response => {
const reader = response.body.getReader();
return reader.read().then(function process({ done, value }) {
if (done) return;
console.log('收到块大小:', value.length);
// 这里可做增量解析，如检查魔数、解包帧等
return reader.read().then(process);
});
});
解析常见二进制格式的小技巧
拿到 Uint8Array 后，具体解析逻辑取决于文件格式：
-
PNG/JPEG：检查前几个字节是否匹配魔数（PNG：
89 50 4E 47；JPEG：FF D8 FF） - WAV：读取 44 字节头结构，提取采样率、位深、声道数
-
ZIP：查找
50 4B 03 04（本地文件头）或50 4B 05 06（结束记录） -
自定义协议：按约定的偏移和长度用
DataView提取字段，例如：new DataView(buffer).getUint32(0, true)（小端读 4 字节整数）
注意事项与避坑点
实际使用中容易忽略的关键细节：
- CORS 限制：跨域请求二进制资源时，服务端必须返回
Access-Control-Allow-Origin，否则 fetch 会静默失败 - 响应类型：无需设置
responseType（那是 XMLHttpRequest 的写法），fetch 默认按内容类型推断，但二进制建议显式用arrayBuffer() - 错误处理：`response.ok` 判断 HTTP 状态码，`response.status` 为 0 表示网络失败（如离线），此时
arrayBuffer()会 reject - 内存管理：大文件的
ArrayBuffer占用堆内存，不用时可置空引用，帮助 GC
