JavaScript 与后端 API 交互的核心是 fetch；GET 请求需检查 response.ok 并调用 response.json() 解析，POST 发送 JSON 需设置 headers 和 JSON.stringify(body)。
JavaScript 与后端 API 交互的核心是 fetch，不是 XMLHttpRequest，也不是第三方库（除非你明确需要它们的额外能力）。
用 fetch 发 GET 请求并处理 JSON 响应
绝大多数读取数据场景都走这条路径。注意：返回的是 Promise，必须用 await 或 .then()；fetch 成功只表示网络请求发出去了，不表示后端返回了 200 —— HTTP 错误状态码（如 404、500）不会自动 reject，得手动检查 response.ok。
- 直接
await fetch('/api/users')得到的是Response对象，不是 JSON 数据 - 要调用
response.json()才能解析为 JS 对象，这个方法也返回 Promise - 常见错误：漏掉
if (!response.ok) throw new Error(...)，导致 404 时静默拿到空数组或 undefined - 示例：
const res = await fetch('/api/posts');<br>if (!res.ok) throw new Error(`HTTP ${res.status}`);<br>const data = await res.json();
用 fetch 发 POST 请求传 JSON 数据
发送表单以外的数据（比如对象、数组）基本都用 Content-Type: application/json。关键点在于：必须显式设置 headers，且 body 必须是字符串（用 JSON.stringify()）。
- 忘记设
headers: { 'Content-Type': 'application/json' }→ 后端可能收不到req.body - 直接传对象给
body→ 报错 “TypeError: Request with GET/HEAD method cannot have body” 或静默失败 - 没处理后端返回的 201/204 状态 → 误以为失败（其实成功了但没返回体）
- 示例：
await fetch('/api/comments', {<br> method: 'POST',<br> headers: { 'Content-Type': 'application/json' },<br> body: JSON.stringify({ text: 'Hello', postId: 123 })<br});
如何处理 token 认证和跨域请求
带身份认证的请求，token 通常放在 Authorization 请求头；跨域问题不是前端能“解决”的，而是后端需配置 CORS 响应头（如 Access-Control-Allow-Origin），但前端要配合加 credentials 选项。
立即学习“Java免费学习笔记（深入）”；
- 登录后把 token 存在
localStorage或sessionStorage，每次请求带上：headers: { Authorization: `Bearer ${token}` } - 如果需要传 cookie（比如 session 登录），必须加
credentials: 'include'，否则浏览器不发 cookie - 加了
credentials: 'include'后，后端的Access-Control-Allow-Origin不能是*，必须是具体域名（如https://myapp.com） - 开发时遇到 “No 'Access-Control-Allow-Origin' header” 错误，90% 是后端没配好，前端加代理（如 vite 的
server.proxy）只是临时绕过方案
什么时候该用 axios 而不是原生 fetch
如果你需要自动转换 JSON、请求/响应拦截器、取消请求、更细粒度的错误分类（比如网络错误 vs 业务错误）、或兼容 IE11，那就用 axios。否则，现代浏览器里 fetch 更轻量、更标准。
-
fetch默认不带 cookie，axios默认也不带，但它的withCredentials: true更易记 -
axios会把 HTTP 错误状态（4xx/5xx）自动转为 rejected Promise，fetch不会 —— 这是最大行为差异 -
axios的CancelToken已废弃，现在用AbortController（fetch也支持），所以取消请求能力已趋同 - 不要只因“别人用 axios”就引入它；多一个包意味着多一次网络请求、更多内存占用、更多潜在 bug 面向点
真正容易被忽略的是错误边界：网络中断、后端进程崩溃、代理超时、CORS 配置错位、token 过期却没清 localStorage —— 这些情况往往比“怎么发请求”更难定位。建议每个 API 调用都包裹最小 try/catch，并区分日志级别（network error 单独上报）。
