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 数据
要调用 response.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': 'app
lication/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）只是临时绕过方案