Response.json() 是 Fetch API 中解析 JSON 响应体的方法，返回 Promise，必须用 await 或 .then() 处理；它不检查 HTTP 状态码或网络错误，需配合 try/catch 和 response.ok 才能安全使用。
在 Fetch API 中调用 Response.json() 是提取 JSON 响应体最直接、最常用的方式。它会把响应流解析为 JavaScript 对象，但要注意它返回的是 Promise，必须用 await 或 .then() 处理，不能直接赋值。
为什么不能直接写 data = response.json()
response.json() 不是同步方法，它读取响应体流并解析 JSON，整个过程是异步的。如果忽略 Promise 特性，比如这样写：
const response = await fetch('/api/user');<br>const data = response.json(); // 这里 data 是 Promise，不是对象！<br>console.log(data.name); // TypeError: Cannot read property 'name' of undefined
正确使用 Response.json 的两种方式
✅ 推荐用 await（配合 async 函数）：
立即学习“Java免费学习笔记（深入）”；
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 代码简洁，逻辑清晰，错误处理更自然
- 必须确保外层函数是
async
async function getUser() {<br> try {<br> const response = await fetch('/api/user');<br> if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);<br> const data = await response.json(); // ✅ 等待解析完成<br> return data;<br> } catch (err) {<br> console.error('获取用户失败:', err);<br> }<br>}
✅ 也可用 .then() 链式调用（兼容性更好）：
- 适合不支持 async/await 的旧环境（如某些嵌入式 JS 引擎）
- 注意避免“Promise 地狱”，建议只链两到三层
fetch('/api/user')<br> .then(response => {<br> if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);<br> return response.json(); // ✅ 返回新的 Promise，供下一个 .then 消费<br> })<br> .then(data => console.log(data.name))<br> .catch(err => console.error(err));
常见陷阱与应对建议
-
响应不是 JSON 时会报错：比如服务器返回 404 页面 HTML，或空响应体。建议先检查
response.headers.get('content-type')是否含application/json，或用response.status+response.ok判断成功与否 -
重复调用
response.json()会失败：Response 流只能读取一次。第二次调用会抛出 TypeError。如需多次使用，应把第一次解析结果保存下来 -
网络中断或 CORS 失败不会触发
catch中的response.json()错误：这些属于 fetch 层异常，需在catch中统一处理；而 JSON 解析失败（如格式错误）才在.json()的 Promise reject 中捕获
封装一个健壮的 JSON 请求工具函数
把错误判断、JSON 解析和类型保障打包，提升复用性：
async function jsonFetch(url, options = {}) {<br> const response = await fetch(url, options);<br> if (!response.ok) {<br> const message = `HTTP ${response.status} ${response.statusText}`;<br> throw Object.assign(new Error(message), { response });<br> }<br> const data = await response.json();<br> if (data === null || typeof data !== 'object') {<br> throw new Error('JSON 响应体不是有效对象');<br> }<br> return data;<br>}之后可直接：
const user = await jsonFetch('/api/user'); 
