JavaScript Fetch API 怎么实现接口请求结果解压-js教程-PHP中文网

在 javascript 中使用 fetch api 发起请求时，浏览器会自动处理大多数常见的压缩格式（如 gzip、deflate、br），无需手动解压。你只需正常调用 fetch() 并读取响应体即可，浏览器会在底层完成解压缩并将结果传递给 response.text() 或 response.json()。如果服务器返回了不支持的编码或需要强制指定编码，可以通过检查 content-encoding 响应头来确认状态，但通常不需要额外代码介入。

JavaScript Fetch API 怎么实现接口请求结果解压

如何验证服务器是否使用了压缩以及响应类型

要确认接口请求是否被压缩，可以检查响应头中的 Content-Encoding 字段。如果该字段存在且值为 gzip、br 或 deflate，说明服务器已启用压缩，而浏览器会自动解压。开发者可以通过 response.headers.get('Content-Encoding') 获取此信息，并结合 response.type 判断响应是 basic、cors 还是 opaque。这有助于排查跨域或特殊场景下的数据解析问题。

JavaScript Fetch API 怎么实现接口请求结果解压

const url = 'https://api.example.com/data';

fetch(url)
  .then(response => {
    console.log('Content-Encoding:', response.headers.get('Content-Encoding'));
    console.log('Response Type:', response.type);
    return response.json();
  })
  .then(data => {
    console.log('Decompressed Data:', data);
  })
  .catch(error => {
    console.error('Fetch failed:', error);
  });

如何处理非标准压缩或手动解压需求

虽然浏览器通常自动处理压缩，但在某些极端情况（如自定义协议或旧版服务器）下可能需要手动解压。此时可使用 DecompressionStream API 配合 ReadableStream 实现。例如，若服务器返回 gzip 编码但未正确设置响应头，可手动创建流并应用解码器。这种方式适用于高级场景，普通开发中极少需要。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

JavaScript Fetch API 怎么实现接口请求结果解压

async function fetchAndDecompress(url) {
  const response = await fetch(url);
  const stream = response.body;
  
  if (!stream) throw new Error('No body');
  
  const decoder = new DecompressionStream('gzip');
  const decompressedStream = stream.pipeThrough(decoder);
  
  const reader = decompressedStream.getReader();
  const chunks = [];
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }
  
  const raw = new Uint8Array(chunks.reduce((acc, chunk) => acc + chunk.length, 0));
  let offset = 0;
  for (const chunk of chunks) {
    raw.set(chunk, offset);
    offset += chunk.length;
  }
  
  return new TextDecoder().decode(raw);
}

fetchAndDecompress('https://api.example.com/data')
  .then(text => console.log('Manual Decompressed:', text))
  .catch(err => console.error('Error:', err));