JavaScript 中怎么在 Fetch API 中使用 Response.json 简化数据提取-js教程-PHP中文网

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

response.json() 是 fetch api 中解析 json 响应体的方法，返回 promise，必须用 await 或 .then() 处理；它不检查 http 状态码或网络错误，需配合 try/catch 和 response.ok 才能安全使用。

javascript 中怎么在 fetch api 中使用 response.json 简化数据提取

在 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 函数）：

代码简洁，逻辑清晰，错误处理更自然
必须确保外层函数是 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');