fetch怎么处理json

解析：fetch API 如何优雅处理 JSON 数据

在 Web 开发中，前后端数据交互的核心往往是 JSON（JavaScript Object Notation）格式，作为现代浏览器内置的 Web API，fetch 凭借其 Promise 基础的异步特性和简洁的接口，已成为发送 HTTP 请求的主流选择，很多开发者在使用 fetch 处理 JSON 数据时，仍会遇到诸如“返回的是字符串而非对象”“如何正确处理错误”等问题，本文将详细拆解 fetch 处理 JSON 的完整流程，从基础用法到进阶技巧，助你这一核心技能。

fetch 与 JSON 的基础交互流程

fetch 本质上用于发起 HTTP 请求并返回一个 Promise，该 Promise 会解析为一个 Response 对象，而 JSON 数据通常作为响应体（body）存在于 Response 对象中，因此处理 JSON 的核心步骤是：发起请求 → 解析响应体 → 将响应体转换为 JavaScript 对象。

发起 fetch 请求

通过 fetch(url, options) 发起请求，获取一个 JSON 接口的数据：

fetch('https://api.example.com/data')
  .then(/* 处理响应 */)
  .catch(/* 处理错误 */);

解析响应体为文本流

Response 对象提供了一系列方法来读取响应体，json() 是专门用于解析 JSON 格式响应体的方法。需要注意的是，json() 也是一个异步方法，它会读取响应体并将其解析为 JavaScript 对象（或数组），同时返回一个新的 Promise。

完整的处理链式调用如下：

fetch('https://api.example.com/data')
  .then(response => response.json()) // 调用 json() 解析响应体
  .then(data => {
    console.log(data); // 此时的 data 已是 JavaScript 对象
  })
  .catch(error => {
    console.error('请求或解析失败:', error);
  });

关键细节：response.json() 的工作原理

很多开发者会疑惑：为什么需要调用 response.json()，而不是直接使用 response？这涉及到 HTTP 响应的流式处理机制。

• 响应体是流（Stream）：fetch 的响应体是一个 ReadableStream，数据是分块传输的。response.json() 会读取整个流，将其内容拼接为字符串，然后通过 JSON.parse() 解析为 JavaScript 对象。
• 只能解析一次：流数据只能被消费一次，response.json() 只能调用一次，如果重复调用，会抛出 TypeError，因为流已被“读取完毕”。

示例：验证 json() 的返回值

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response); // Response 对象，body 是流
    return response.json(); // 返回 Promise，解析后的对象
  })
  .then(data => {
    console.log(typeof data); // "object" 或 "array"
  });

错误处理：区分网络错误与 HTTP 状态错误

fetch 的错误处理机制与传统 XMLHttpRequest 不同，需要特别注意两点：

网络错误 vs HTTP 状态错误

• 网络错误：如请求中断、域名无法解析等，会直接进入 catch 块。
• HTTP 状态错误：如 404（未找到）、500（服务器错误）等，fetch 不会主动抛出错误，而是通过 response.ok（状态码 200-299）或 response.status 判断。

正确的错误处理方式

建议在 then 中检查 response.ok，若状态码异常则手动抛出错误，以便后续 catch 捕获：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('数据解析成功:', data);
  })
  .catch(error => {
    console.error('请求失败:', error.message);
  });

进阶实践：结合 async/await 提升代码可读性

虽然 fetch 基于 Promise，但通过 async/await 可以让异步代码更接近同步风格，提升可读性。

async function fetchJsonData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    const data = await response.json(); // 等待 JSON 解析完成
    console.log('数据:', data);
    return data;
  } catch (error) {
    console.error('获取数据失败:', error);
    throw error; // 可以选择向上抛出错误，由调用方处理
  }
}
// 调用函数
fetchJsonData()
  .then(data => {
    // 进一步处理数据
  });

常见问题与解决方案

问题：response.json() 返回的是字符串而非对象？

原因：可能误将 JSON.stringify() 的结果作为响应体，或调用了 response.text() 后手动解析。 解决：确保直接调用 response.json()，而非手动解析文本。

问题：跨域请求时 fetch 失败？

原因：浏览器同源策略限制，需服务器返回正确的 CORS 头（如 Access-Control-Allow-Origin）。 解决：后端需配置跨域支持，前端无需额外代码（除非使用 credentials 选项）。

问题：如何发送 JSON 数据并设置请求头？

场景：POST 请求携带 JSON 请求体（如提交表单数据）。 示例：

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 声明发送 JSON 数据
  },
  body: JSON.stringify({ name: '张三', age: 25 }), // 对象转为 JSON 字符串
})
.then(response => response.json())
.then(data => console.log('响应:', data));

fetch 处理 JSON 的核心步骤

1. 发起请求：使用 fetch(url, options) 发起 HTTP 请求。
2. 检查响应：通过 response.ok 或 response.status 刔回状态是否成功。
3. 解析 JSON：调用 response.json() 将响应体转换为 JavaScript 对象（注意：json() 返回 Promise）。
4. 错误处理：结合 try/catch（async/await）或 .catch()（Promise 链）捕获网络错误和 HTTP 状态错误。

通过以上步骤,你可以优雅地使用 fetch 处理 JSON 数据，实现前后端高效的数据交互，随着对 fetch 的理解，你还可以结合 AbortController 控制请求、Response 其他方法（如 blob()、text()）处理不同类型的数据，进一步应对复杂业务场景。