如何将Fetch接口返回的响应转换为ArrayBuffer？

核心实现逻辑 #

Fetch API没有和axios一致的responseType请求级配置项，它返回的Response实例内置了直接获取二进制格式内容的异步方法，不需要手动对原始响应对象做二次包装。
仅需两步即可拿到和axios配置responseType: 'arraybuffer'完全一致的ArrayBuffer数据：

• 先await拿到fetch返回的Response实例
• 调用Response实例内置的arrayBuffer()方法，await执行结果即可

可直接运行的示例代码 #

async function get(url) {
  const response = await fetch(url, {
    method: 'GET'
  })
  // 直接通过内置方法获取符合规范的ArrayBuffer
  const arrayBuffer = await response.arrayBuffer()
  console.log(arrayBuffer)
  return arrayBuffer
}

常见误区说明 #

你当前尝试的Buffer.from(response)写法存在明显的适用边界问题：

• 浏览器环境下不存在全局Buffer构造器，这段代码会直接抛出引用未定义的报错
• 这种写法是把Response实例本身（而非解析完成的响应体）传入Buffer构造方法，最终输出和axios一致的Buffer内容属于偶然匹配，在碰到带特殊编码响应头、大文件分块传输的场景时，很容易出现字节错位、内容截断的问题
• 如果在Node.js环境下确实需要拿到Node原生Buffer实例，不需要跳过fetch的内置二进制解析逻辑，只需要在通过response.arrayBuffer()拿到标准ECMAScript规范定义的ArrayBuffer之后做一次转换即可：

  // 在已拿到arrayBuffer变量的基础上完成Node Buffer转换
  const nodeBuffer = Buffer.from(arrayBuffer)
  

内容的提问来源于stack exchange，提问作者Oamar Kanji