fetch API 是浏览器原生提供的 HTTP 请求工具，处理 JSON 数据时，它比传统 XMLHttpRequest 更简洁，也比第三方库如 axios 更轻量，基于 Promise 的设计让异步代码更易读。参考2
下面系统地拆解 fetch 与 JSON 结合的基础用法、技术选型、跨域方案以及实战技巧。
fetch api json 怎么用？从基础语法到数据解析
基础语法：fetch(url, options) 与 Promise 链
fetch 的第一个参数是 URL，第二个是可选的配置对象，它返回一个 Promise，resolve 时拿到 Response 对象，要获取 JSON 数据，需要调用 response.json()，这个方法也返回 Promise。
- 最简单的 GET 请求：
fetch('https://api.example.com/data')然后链式.then(res => res.json()).then(data => console.log(data))。 - 使用 async/await：
const res = await fetch(url); const data = await res.json();。 - 配置对象常见选项：method、headers、body、mode、credentials、cache、signal 等。
fetch api json 请求本地json文件示例
在开发中，常常需要请求本地静态 JSON 文件，只要文件放在项目的 public 目录下,直接用相对路径即可：
fetch('./data.json')
.then(res => res.json())
.then(data => console.log(data));
这种方式不存在跨域问题,非常适合快速测试和数据加载。
发送 JSON 数据：POST 请求中的 Content-Type 设置
当提交 JSON 数据时，必须设置 method 为 POST，headers 包含 'Content-Type': 'application/json'，body 是 JSON.stringify 后的字符串。
fetch('https://api.example.com/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: '李四', age: 25 })
});
很多新手忘记设置 Content-Type 或忘记序列化，导致后端收到空对象或解析错误,这是最常见的坑之一。
解析 JSON 响应：response.json() 的正确用法
response.json() 读取响应体并解析为 JSON，如果响应不是合法 JSON，会抛出 SyntaxError，所以建议先检查 response.ok 或 status。
- 检查 response.ok：如果为 false，可以 throw 一个错误或进入错误处理。
- 常见做法：封装一个统一的请求函数,内部处理这些检查和错误。
封装一个通用的 fetch 请求函数
在实际项目中，我们通常不会直接使用裸 fetch，而是封装一个函数，统一处理请求头、错误、超时、JSON 解析等。
async function request(url, options = {}) {
const controller = new AbortController();
const timeout = options.timeout || 5000;
const timeou
tId = setTimeout(() => controller.abort(), timeout);
try {
const res = await fetch(url, {
...options,
signal: controller.signal,
headers: { 'Content-Type': 'application/json', ...options.headers },
});
if (!res.ok) throw new Error(`HTTP error ${res.status}`);
return await res.json();
} catch (err) {
if (err.name === 'AbortError') throw new Error('请求超时');
throw err;
} finally {
clearTimeout(timeoutId);
}
}
这样，每次调用 request('https://api.example.com/data') 就能得到 JSON 数据，并自动处理超时和 HTTP 错误。
fetch api json 和 axios 哪个更适合你的项目
语法简洁性对比
fetch 是原生 API，无需额外安装，但处理 JSON 需要手动转换，axios 提供了自动 JSON 转换、拦截器、请求取消等高级功能,代码更简洁。
| 特性 | fetch | axios |
|---|---|---|
| 自动 JSON 转换 | 需要手动调用 .json() | 自动 |
| 请求取消 | 通过 AbortController | 内置 CancelToken |
| 拦截器 | 不支持，需自行封装 | 支持 |
| 浏览器兼容性 | 现代浏览器，IE 不支持 | 需 polyfill，但兼容性更好 |
从代码量看，axios 在复杂场景下更简洁，fetch 在简单场景下更轻量，行业共识认为，在可控的现代浏览器环境中，fetch 是趋势；但在需要兼容旧浏览器或高级功能时，axios 仍是稳妥选择。参考2
错误处理机制差异
fetch 只在网络故障时 reject，对 HTTP 错误状态码（如 404、500）会 resolve，但 response.ok 为 false，所以你需要手动检查状态码，而 axios 对非 2xx 状态码自动 reject,错误处理更统一。
- 在 fetch 中，建议统一检查 response.ok，如果不 ok 则 throw 或调用错误处理函数。
- 也可以使用拦截器模式（自己封装）来统一处理错误。
社区生态与学习成本
axios 有庞大的社区和丰富的插件，学习曲线平缓，fetch 作为标准 API，学习成本低，但需要自己封装一些功能，从实际项目来看，如果你希望代码更标准、更未来，fetch 是更好的选择；如果你希望开箱即用、减少样板代码，axios 更高效。
应用场景选择建议
- 轻量项目：只发几个请求，追求零依赖，选 fetch。
- 复杂项目：大量请求，需要拦截器、全局错误处理、请求取消、上传进度等，选 axios 更高效。
- 在 Node.js 环境中，axios 支持更早，fetch 需要额外库或等待 Node 18+。
fetch api json 跨域问题怎么解决
CORS 跨域资源共享配置
当请求跨域资源时，浏览器会先发送 OPTIONS 预检请求，服务器需返回正确的 CORS 头，如 Access-Control-Allow-Origin，fetch 默认不带凭据，如果需要携带 cookies，要设置 credentials: 'include'。
- 服务器端设置
Access-Control-Allow-Origin:或具体域名。 - 对于需要 cookies 的请求，服务器还需设置
Access-Control-Allow-Credentials: true，且 Origin 不能为 。 - fetch 的 mode 选项默认是 ‘cors’，也可以设置为 ‘no-cors’ 但只能发送简单请求,且响应不可读。
开发环境代理方案
在开发阶段，通过配置构建工具代理来绕过 CORS 是最常用的方法，在 Vite 的 vite.config.js 中设置：
server: {
proxy: {
'/api': 'https://api.example.com'
}
}
这样，前端请求 /api/xxx 会被代理到 https://api.example.com/xxx，避免跨域，业内专家指出,这是开发中最实用的跨域解决方案。
生产环境跨域解决方案
在生产环境中，通常通过配置 Nginx 反向代理或使用 API 网关来解决跨域，Nginx 配置：
location /api/ {
proxy_pass https://api.example.com/;
proxy_set_header Host $host;
}这样，前端请求同域下的 /api/ 就会被代理到后端,规避跨域问题。
JSONP 的局限与 fetch 替代方案
JSONP 只能用于 GET 请求，且有安全风险，现在已不推荐使用，如果后端不支持 CORS，可以考虑自建代理服务，或者使用 postMessage 与 iframe 通信，fetch 配合 CORS 是标准做法。
fetch api json 实战技巧与常见踩坑
请求超时控制：AbortController 的使用
fetch 原生不支持超时，但可以通过 AbortController 实现。
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
fetch(url, { signal: controller.signal })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求超时');
}
})
.finally(() => clearTimeout(timeoutId));
请求重试机制
当请求失败时，可以自动重试几次，在 catch 中判断错误类型，如果是网络错误或超时，则重新发起请求，最多重试 3 次。
async function requestWithRetry(url, options, retries = 3) {
for (let i = 0; i < retries; i++) {
try {
return await request(url, options);
} catch (err) {
if (i === retries - 1) throw err;
// 等待一段时间再重试
await new Promise(r => setTimeout(r, 1000 (i + 1)));
}
}
}
并发请求：Promise.all 与 fetch 结合
参考2
当需要同时请求多个接口时，可以使用 Promise.all 或 Promise.allSettled，注意，如果其中一个请求失败，Promise.all 会整体 reject,所以根据场景选择。
- 需要所有请求成功才继续：用 Promise.all。
- 需要每个请求结果独立处理：用 Promise.allSettled。
取消重复请求
在搜索框等场景中，需要取消上一次未完成的请求，只保留最新一次，可以使用 AbortController 结合 Map 来管理。
const pendingRequests = new Map();
function getRequestKey(url, options) {
return url + JSON.stringify(options);
}
async function fetchWithCancel(url, options) {
const key = getRequestKey(url, options);
if (pendingRequests.has(key)) {
pendingRequests.get(key).abort();
}
const controller = new AbortController();
pendingRequests.set(key, controller);
try {
const result = await fetch(url, { ...options, signal: controller.signal });
return await result.json();
} finally {
pendingRequests.delete(key);
}
}
这样，在连续输入时，前面的请求会被取消,只执行最后一次。
兼容性处理：polyfill 与降级方案
现代浏览器普遍支持 fetch，但 IE 和一些老旧浏览器不支持，可以使用 whatwg-fetch 或 unfetch 等 polyfill，在引入 polyfill 后，fetch 在旧浏览器中也能工作，据统计，现代浏览器对 fetch 的支持已经相当广泛，但在一些老旧环境中仍需 polyfill 来降级。
fetch API 处理 JSON 不仅简洁高效，而且随着浏览器支持越来越广，它已经成为前端开发中不可或缺的技能，掌握它的基础用法和常见陷阱，能让你在项目中更从容地处理数据请求，无论是简单的 GET 请求，还是复杂的 POST 与跨域场景，fetch 都能胜任,关键是要理解它的设计哲学和边界情况。
fetch api json 常见问题与解答
问题1：fetch 请求 JSON 时，怎么处理网络错误和 HTTP 错误？
fetch 只在网络故障时 reject，所以需要在 .then 中检查 response.ok，ok 为 false，则 throw 或进入错误处理分支，在 .catch 中处理网络错误，建议封装一个统一的请求函数,内部处理这些逻辑。
问题2：fetch 上传 JSON 时，为什么后端总是收到空对象？
大多数情况下是因为忘记设置 Content-Type 为 application/json，或者 body 没有用 JSON.stringify 转换，确保头部正确，body 是字符串,后端就能正常解析。
问题3：fetch 在 Node.js 环境中怎么用？
Node.js 原生不支持 fetch，但可以使用 node-fetch 或 undici 等库，或者等待 Node.js 18+ 的原生 fetch 支持，在 Node.js 中，fetch 的用法与浏览器一致，但不存在跨域问题，且无需处理 CORS。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/530144.html
