javascript如何与后端API进行数据通信【教程】

正确发起GET请求需用URLSearchParams构造参数、检查response.ok并显式调用response.json()；POST提交json须设Content-Type头且body用JSON.stringify()；CORS是浏览器同源策略限制，需后端配置或本地代理解决；封装请求函数应统一base URL、headers和错误处理，避免过早抽象。

javaScript 与后端 API 通信，核心就是用 fetch 或 XMLhttpRequest 发起 HTTP 请求；现代项目基本只用 fetch，但得处理好 promise 链、错误边界和跨域限制。

如何用 fetch 正确发起 GET 请求

GET 请求看似简单，但容易漏掉响应体解析和网络错误捕获。浏览器中 fetch 成功只表示请求已发出（哪怕后端返回 500），不等于业务成功。

• 必须显式调用 response.json()（或 response.text()）才能读取响应体，否则只是个流对象
• 4xx/5xx 状态码不会触发 catch，需手动检查 response.ok
• URL 中的查询参数建议用 URLSearchParams 构造，避免拼接出错

const params = new URLSearchParams({ id: 123, lang: 'zh' }); fetch(`/api/user?${params}`)   .then(r => {     if (!r.ok) throw new Error(`HTTP ${r.status}`);     return r.json();   })   .then(data => console.log(data))   .catch(err => console.error('请求失败:', err));

POST 提交 JSON 数据时要注意什么

后端通常期望 Content-Type: application/json，但 fetch 默认不设这个 header，且 body 必须是字符串。

• body 字段必须是字符串，不能直接传对象，要用 JSON.stringify()
• 务必手动设置 headers: { 'Content-Type': 'application/json' }
• 如果后端用 form 表单接收（如 express 的 urlencoded 中间件），则应改用 FormData 或调整 header 和 body 格式

fetch('/api/login', {   method: 'POST',   headers: { 'Content-Type': 'application/json' },   body: JSON.stringify({ email: 'a@b.c', password: '123' }) });

为什么本地开发时经常遇到 CORS 错误

CORS 是浏览器强制的同源策略，不是代码写错了，而是服务端没允许当前域名访问。常见表现是控制台报 access to fetch at ... from origin ... has been blocked by CORS policy。

立即学习“Java免费学习笔记（深入）”；

• 前端无法绕过 CORS —— 这是浏览器行为，fetch 或 axios 都一样
• 开发阶段可让后端在响应头加 Access-Control-Allow-Origin: http://localhost:3000（不要用 * 配合 credentials）
• 若后端无法改，可用本地代理（如 vite 的 server.proxy 或 webpack DevServer 的 proxy）把 /api 请求转到后端地址

要不要封装一个统一的请求函数

直接裸用 fetch 很快会重复处理 loading、Token 注入、错误 toast、超时等逻辑。封装是必要的，但别过早抽象成“万能 request 库”。

• 至少提取公共 base URL、默认 headers（如带 Authorization）、统一错误处理
• 避免在封装里自动重试或自动刷新 token —— 这些逻辑依赖具体业务流程，放外层更可控
• 类型安全建议配合 typescript 接口定义 response 结构，而不是靠 any 或随意的 then 链

真正麻烦的从来不是发请求，而是处理「请求已发、响应未到」之间的状态，以及服务器返回了意料之外的字段或结构 —— 这些没法靠工具链自动解决。