response.json() 仅解析json,空响应或非json格式会reject;response.text()和blob()不校验格式,适合兜底;clone()必须在读取前调用以避免流已读错误;formdata()和arraybuffer()有严格适用场景;所有方法返回promise且不可逆。

Response 对象的常用方法就那五个,但用错一个就会报 TypeError: body stream already read 或直接崩掉脚本。
response.json() 什么时候会 reject
它只负责解析 JSON,不关心 HTTP 状态码或响应体是否为空:
-
response.json()在响应体是空字符串、null、undefined或非 JSON 格式(比如返回了 HTML 错误页)时,会立即 reject - 即使
response.ok === true,只要后端返回了空响应(如 204 No Content),response.json()也会失败 - 别把它和
response.ok混为一谈:前者管“能不能转成 JS 对象”,后者管“HTTP 状态是不是 2xx”
response.text() 和 response.blob() 的实际用途
这两个方法不校验内容格式,适合兜底或非结构化数据:
-
response.text()是最安全的 fallback:哪怕后端返回乱码、HTML、XML 或空响应,它都 resolve 一个字符串(可能是空串) -
response.blob()主要用于文件下载、图片预览、二进制处理;注意Blob不能直接console.log,得用URL.createObjectURL()转成 URL 才能显示 - 如果不确定后端返回什么类型,先
await response.text(),再手动JSON.parse()—— 至少不会因格式问题中断流程
为什么 clone() 不是可选,而是必须掌握
response.body 是个单次读取的 ReadableStream,所有读取方法共享同一份底层流:
- 调用过
response.json()后,再调response.text()就会报body stream already read -
response.clone()返回新副本,两个流互不影响;常见于“既要存日志又要解析数据”场景 - 注意:
response.clone()必须在任何读取方法调用前执行,否则原流已关闭,clone 出来也是空的
response.formData() 和 arrayBuffer() 的边界场景
这两个方法有明确的适用前提,乱用等于白写:
-
response.formData()仅适用于响应头含Content-Type: multipart/form-data的情况,比如后端用form.submit()或fetch上传后返回的表单反馈;普通 JSON 接口调它必 reject -
response.arrayBuffer()适合需要底层字节操作的场景(如解密、音频处理),但体积大时内存压力明显;比blob()更底层,也更难调试 - 没有“万能读取方法”——选哪个,取决于你明确知道后端返回的是什么,而不是凭感觉试
最容易被忽略的是:所有这些方法返回的都是 Promise,且一旦开始读取,就不可逆。没做 try/catch 包裹 response.json(),或者在未检查 response.ok 前就调用读取方法,线上出问题时连错误堆栈都指向不到真正源头。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











