fetch发GET请求最直接：返回Promise支持async/await，需手动检查res.ok或status处理404/500；带参用URLSearchParams；跨域依赖后端CORS配置；POST需设Content-Type；错误处理须兼顾网络异常与业务错误。
用 fetch 发 GET 请求最直接
浏览器环境里，fetch 是当前最常用、也最轻量的通信方式。它返回 Promise，天然支持 async/await，不用额外引入库。
常见错误是忽略网络失败和 HTTP 状态码异常——fetch 只在真正“请求没发出去”（如断网、DNS 失败）时 reject，而 404、500 这类响应仍会 resolve，必须手动检查 response.ok 或 response.status。
- GET 请求示例：
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json(); - 带查询参数建议用
URLSearchParams构造，避免拼接出错：const params = new URLSearchParams({ page: '1', limit: '10' });
await fetch(`/api/posts?${params}`); - 默认不带 Cookie，如需携带登录态，得显式加
credentials: 'include'
POST 提交 JSON 数据要设好 Content-Type
后端通常依赖 Content-Type: application/json 来解析请求体。漏掉这个 header 是 400 错误的高频原因，尤其用 Express、FastAPI 等框架时。
- 正确写法：
await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: 'a@b.c', password: '123' })
}); - 如果后端接收的是表单数据（
application/x-www-form-urlencoded），就别用JSON.stringify，改用new URLSearchParams(formObj) - 注意：
body必须是字符串、Blob、FormData 等可读流类型，不能直接传对象
跨域问题不是前端能绕开的
当域名、协议或端口不一致时，浏览器会拦截响应（即使后端已返回数据）。这不是 fetch 的限制，而是 CORS 安全机制。
立即学习“Java免费学习笔记（深入）”；
- 前端唯一可控的是加
mode: 'cors'（默认值），但关键在后端是否返回了合法的Access-Control-Allow-Origin - 开发时本地启了
localhost:3000，后端在localhost:8000，必须让后端允许该源，例如返回Access-Control-Allow-Origin: http://localhost:3000 - 若需带认证（如 Cookie、Authorization header），后端还必须设置
Access-Control-Allow-Credentials: true，且此时Access-Control-Allow-Origin不能为*
错误处理别只靠 try/catch
try/catch 只能捕获 fetch 抛出的网络异常，抓不到 4xx/5xx 响应。真实项目里，业务错误（如登录失败、权限不足）几乎都藏在响应体里。
- 建议封装一层请求函数，统一处理状态码和常见错误结构：
async function request(url, options = {}) {
const res = await fetch(url, options);
if (!res.ok) {
const err = await res.json();
throw new Error(err.message || `HTTP ${res.status}`);
}
return res.json();
} - 后端返回格式不一致时（比如有时是
{ code: 0, data: ... }，有时是裸对象），前端解析逻辑容易崩，最好在封装层做归一化 - 超时控制原生
fetch不支持，需用AbortController配合signal选项
