JavaScript Fetch API 中怎么处理返回的文本与二进制数据-js教程-PHP中文网

fetch api 的响应体默认为 readablestream，需调用 text()、json() 或 arraybuffer() 等方法获取内容；text() 自动按 content-type 解码但仅可调用一次；json() 内部调用 text() 并解析，建议配合 res.ok 使用；二进制数据应使用 arraybuffer() 或 blob() 避免乱码。

javascript fetch api 中怎么处理返回的文本与二进制数据

Fetch API 返回的响应体（Response body）默认是 ReadableStream，不能直接读取内容。要获取文本或二进制数据，需调用对应的方法（如 text()、json()、arrayBuffer() 等），这些方法返回 Promise，必须用 await 或 .then() 处理。

获取纯文本（HTML / plain text / XML）

适用于返回 HTML 页面、日志、配置文件、XML 等非结构化或简单结构化文本。

用 response.text() 获取字符串，自动按响应头中的 Content-Type 字符集（如 utf-8）解码
若服务器未正确设置 charset，可手动处理：先用 arrayBuffer() 读取原始字节，再用 TextDecoder 指定编码（如 gbk）
注意：text() 只能调用一次；多次调用会 reject，因为流已被消耗

示例：

const res = await fetch('/api/log.txt');
const content = await res.text(); // 自动按 utf-8 解码
console.log(content);

获取 JSON 数据

虽然本质也是文本，但 response.json() 是专用方法，会自动解析并校验 JSON 格式。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

内部先调用 text()，再执行 JSON.parse()；失败时抛出语法错误
建议始终用 res.ok 判断 HTTP 状态是否成功（200–299），避免 4xx/5xx 响应误解析
不推荐先 text() 再手动 JSON.parse()，除非需要预处理原始字符串

示例：

const res = await fetch('/api/data');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json(); // 自动解析，失败则 reject

获取二进制数据（图片 / PDF / ZIP / 音频等）

对非文本资源，应使用 arrayBuffer()、blob() 或 formData()，避免字符编码干扰。

arrayBuffer()：返回原始字节缓冲区，适合进一步用 Uint8Array、FileReader 或 WebAssembly 处理
blob()：返回 Blob 对象，可直接用于 URL.createObjectURL() 显示图片、下载文件，或传给 File 构造函数
不要用 text() 读取图片/PDF——会导致乱码甚至解析失败

示例（下载并显示图片）：

const res = await fetch('/photo.jpg');
const blob = await res.blob();
const url = URL.createObjectURL(blob);
document.getElementById('img').src = url;