如何通过JavaScript Fetch API计算与Postman一致的请求返回大小？

Postman显示的响应大小是整个HTTP响应的总字节数，包含响应头（如Content-Type、Date等字段）和响应体（如果是压缩传输则为压缩后的字节数）。你当前的代码仅计算了解压后的响应体内容大小，因此和Postman的数值差距很大。要得到一致结果，需要计算响应头+原始响应体的总字节数，具体步骤如下：

1. 保留完整的Fetch Response对象 #

不要只存储解析后的响应体（如JSON对象），必须保留请求返回的完整Response实例，这样才能获取响应头和原始响应体数据。

2. 计算响应头的字节大小 #

HTTP响应头的格式为每个字段是键: 值，用\r\n分隔，最后还有一个\r\n作为头与体的分隔符。可以通过序列化头信息来计算字节数：

function calculateHeaderSize(headers) {
  let headerStr = '';
  headers.forEach((value, key) => {
    headerStr += `${key}: ${value}\r\n`;
  });
  // 添加头与体之间的空行
  headerStr += '\r\n';
  return new Blob([headerStr]).size;
}

3. 计算原始响应体的字节大小 #

Fetch默认会自动解压gzip/deflate压缩的响应体，而Postman显示的是压缩后的原始字节数。要获取原始响应体，需直接读取响应的二进制流：

const rawBodyBuffer = await response.arrayBuffer();
const bodySize = rawBodyBuffer.byteLength;

4. 整合总大小 #

将响应头大小与原始响应体大小相加，就是Postman显示的总响应大小。在Vue中可以这样实现：

const response = ref(null); // 存储完整的Fetch Response对象
const CallSize = computed(async () => {
  if (!response.value) return 0;

  // 计算响应头大小
  const headerSize = (() => {
    let headerStr = '';
    response.value.headers.forEach((value, key) => {
      headerStr += `${key}: ${value}\r\n`;
    });
    headerStr += '\r\n';
    return new Blob([headerStr]).size;
  })();

  // 计算原始响应体大小
  const rawBody = await response.value.arrayBuffer();
  const bodySize = rawBody.byteLength;

  return headerSize + bodySize;
});

注意事项 #

• 如果服务器未启用压缩，原始响应体大小和解压后的大小一致，此时直接用你原来的响应体计算方式也可，但仍需加上响应头大小
• 务必确保请求时没有修改Accept-Encoding头，否则可能影响服务器是否返回压缩内容

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