如何用 ArrayBuffer 在 Fetch 中处理低级别的二进制流

ArrayBuffer 是 Fetch API 中操作原始字节最底层的选择，可通过 response.arrayBuffer() 获取，配合 Uint8Array 等视图读写，支持流式处理大文件及直接作为请求体发送二进制数据。Fetch API 默认将响应体转为高级抽象（如 JSON、文本或 Blob），但若需直接操作原始字节，ArrayBuffer 是最轻量、最底层的选择。它让你绕过自动编码解析，精准控制二进制数据的读写与转换。用 arrayBuffer() 获取原始字节Fetch 响应对象提供 arrayBuffer() 方法，返回一个 Promise，解析为 ArrayBuffer 实例------即一段连续的、未解释的内存块。示例：fetch('/image.png') .then(response => response.arrayBuffer()) .then(buffer => { console.log(buffer.byteLength); // 如 12480 console.log(buffer.constructor === ArrayBuffer); // true });用 Uint8Array 或其他视图读写字节ArrayBuffer 本身不可直接读取；必须通过类型化数组（如 Uint8Array、Int32Array、Float64Array）创建"视图"来访问内容。常见操作：按字节遍历：用 Uint8Array 查看每个 byte（0--255） 读取结构化数据：如从 buffer 开头读取 4 字节整数 → new Int32Array(buffer, 0, 1)[0] 修改内容：直接赋值给视图索引，会同步反映在底层 buffer 中示例（检查 PNG 签名）：response.arrayBuffer().then(buffer => { const view = new Uint8Array(buffer); if (view[0] === 0x89 && view[1] === 0x50 && view[2] === 0x4e && view[3] === 0x47) { console.log('Valid PNG'); }});流式处理大文件：配合 ReadableStream 和 getReader()对超大响应（如百 MB 视频或模型文件），一次性加载到内存可能引发 OOM。Fetch 的 response.body 是 ReadableStream，可分块读取并逐段转为 ArrayBuffer。 Murf AI AI文本转语音生成工具