如何用 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 查看每个 byte0–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文本转语音生成工具