Fetch API 是现代浏览器发起网络请求的标准接口，基于 Promise 且比 XMLHttpRequest 更简洁；需检查 response.ok 判断 HTTP 状态，手动设置 headers 和 JSON.stringify(body)，跨域需配置 credentials，可用 AbortController 取消请求。
Fetch API 是浏览器原生提供的、用于发起网络请求的现代 JavaScript 接口，它比 XMLHttpRequest 更简洁、更基于 Promise，是当前获取数据的事实标准。
Fetch 最基本用法：GET 请求 + JSON 响应
绝大多数场景下，你只需要 fetch(url) + .then(res => res.json()) 就能拿到数据：
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
-
fetch()返回 Promise，但**不拒绝网络错误（如断网）**，只拒绝语法错误或未捕获异常；response.ok才是判断 HTTP 状态是否成功的可靠方式 -
response.json()也返回 Promise，且会失败（比如响应体不是合法 JSON），必须单独catch或链式处理 - 不要省略
response.ok检查 —— 否则 404、500 会被当成“成功”，然后在.json()阶段静默失败
带配置的 POST 请求：发送 JSON 数据
提交表单、调用接口时，常需设置请求头和请求体：
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username: 'alice', password: '123' })
})
.then(r => r.json())
.then(data => console.log(data));
-
method默认是GET，显式写'POST'更安全 -
Content-Type必须手动设为'application/json'，否则后端可能收不到body或解析失败 -
body只接受string、FormData、Blob等，不能直接传对象 ——JSON.stringify()不可少 - 如果后端要求不带
Content-Type（比如某些老旧 API），就别设它；设了却没传body会触发预检（CORS OPTIONS），反而出问题
处理 CORS 和凭据（如 Cookie）
跨域请求默认不带 Cookie，登录态无法透传 —— 这是常见 401 错误的根源：
立即学习“Java免费学习笔记（深入）”；
fetch('/api/profile', {
credentials: 'include' // 或 'same-origin'、'omit'
});
-
credentials: 'include'表示带上 Cookie 和 HTTP 认证信息，但要求服务端响应头包含Access-Control-Allow-Origin（不能是*）和Access-Control-Allow-Credentials: true - 开发时若本地启了代理（如 Vite 的
server.proxy），其实根本没走跨域，此时设credentials反而多余，甚至引发奇怪行为 - 如果你用的是
localhost:3000调localhost:8000，哪怕同域名不同端口，也算跨域 —— 浏览器不看 host 是否一样，只看协议+域名+端口三者是否完全相同
AbortController：主动取消请求（尤其防重复提交）
用户快速点击两次“加载”按钮，或页面切换前请求还在跑，会导致状态错乱。用 AbortController 可以干净地终止：
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
return;
}
throw err;
});
// 任意时机调用：
controller.abort(); // 立即中止请求
-
signal是可选配置项，但一旦传入，就必须处理AbortError，否则会变成未捕获异常 - React/Vue 中常在组件卸载或 effect 清理函数里调
controller.abort()；纯 JS 场景下，建议把controller存在变量里，方便后续控制 - 注意：
abort()不会回滚已发出的请求，只是让 fetch Promise 拒绝，并通知浏览器丢弃后续响应；服务器仍可能继续执行
真正难的不是写对 fetch，而是记住哪些环节要检查状态、哪些头必须配、哪些错误要手动抛 —— 尤其是 response.ok 和 credentials 的组合，最容易在线上突然失效。
