javascript如何与后端API进行数据交互【教程】

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 数据
• 要调用 re

  

  sponse.json() 才能解析为 JS 对象，这个方法也返回 Promise
• 常见错误：漏掉 if (!response.ok) throw new Error(...)，导致 404 时静默拿到空数组或 undefined
• 示例：

  const res = await fetch('/api/posts');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  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', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text: 'Hello', postId: 123 })

如何处理 token 认证和跨域请求

带身份认证的请求，token 通常放在 Authorization 请求头；跨域问题不是前端能“解决”的，而是后端需配置 CORS 响应头（如 Access-Control-Allow-Origin），但前端要配合加 credentials 选项。

• 登录后把 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 单独上报）。