fetch 的 response 对象需按实际响应类型选择 text()、json() 或 blob() 等方法解析，且响应体只能读取一次；须检查 response.ok 或 status 判断 http 状态，避免重复读取或错误解析。
Fetch 返回的 Response 对象本身不包含解析后的数据，它只提供多种方法来按需读取响应体。关键在于：**必须根据服务器实际返回的内容类型，选择对应的方法，并注意响应体只能读取一次**。
明确响应类型再选方法
服务器返回什么，就用什么方式解析，不能凭感觉或 URL 猜测：
-
纯文本（HTML、XML、日志、简单字符串） → 用
response.text() -
JSON 格式数据 → 用
response.json()（自动解析为 JS 对象/数组） -
图片、PDF、ZIP、Excel 等二进制文件 → 用
response.blob()或更底层的response.arrayBuffer() -
表单提交返回的键值对（如服务器用
res.send(new URLSearchParams(...))） → 可用response.text()再手动解析，或搭配new URLSearchParams()
避免“Body 已被使用”错误
Response 的 body 是一个可读流，调用 text()、json() 或 blob() 后，流即关闭。后续再调同一方法会报错：
- ❌ 错误写法：
console.log(response.text()); console.log(response.json());（两次读取） - ✅ 正确做法：只调用一次，并链式处理其返回的 Promise：
response.json().then(data => {...}) - ✅ 若需多种格式（比如先看状态再转 JSON），应提前克隆响应：
const clone = response.clone();，再分别在 clone 和原 response 上调用不同方法
检查响应是否成功再解析
HTTP 状态码 4xx/5xx 不会触发 catch，必须手动判断：
- 用
response.ok判断是否为 200–299 范围 - 用
response.status获取具体状态码，比如区分 401 和 404 - 建议结构：
if (!response.ok) throw new Error(`${response.status} ${response.statusText}`); return response.json();
常见类型解析示例
不同场景下推荐的写法：
-
获取 JSON 接口：
fetch('/api/user').then(r => r.json()).then(user => console.log(user.name)) -
下载文件并触发保存：
fetch('/report.pdf').then(r => r.blob()).then(blob => { const url = URL.createObjectURL(blob); location.href = url; }) -
读取纯文本配置：
fetch('/config.txt').then(r => r.text()).then(txt => console.log(txt.trim())) -
上传后接收服务端返回的 JSON 消息：确保后端 header 是
Content-Type: application/json，前端仍用.json()解析
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
