fetch 是现代首选，但需手动处理 cookie、HTTP 错误、JSON 解析、POST 序列化及 AbortController 取消；IE11 等旧环境仍需 XMLHttpRequest。
直接用 fetch，别碰 XMLHttpRequest —— 除非你得支持 IE11 或更老环境。
fetch 基本用法和常见报错
fetch 默认不带 cookie，也不拒绝非 2xx 状态码（比如 404、500 会进 then 而不是 catch），这是最常踩的坑。
- 必须手动检查
response.ok或response.status才能判断是否真正成功 - 响应体不是 JSON 对象，而是
Response实例，需调用response.json()（或.text()、.arrayBuffer()）才能读取内容 - 网络错误（如断网、域名不存在）才会触发
catch；HTTP 错误状态不会
示例：
fetch('/api/user')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败：', err));
POST 请求怎么传 JSON 数据
发 JSON 不是简单把对象塞进 body，得序列化 + 设置正确 header。
立即学习“Java免费学习笔记（深入）”；
SEO Keyword Density
下载
SEO关键词密度优化与页面审计技能。使用场景：①提供页面路径与关键词进行SEO优化；②提升页面关键词密度；③提升搜索引擎排名；④进行SEO审计（meta标签、OG、hreflang等）。触发词：关键词密度、SEO优化、关键词优化等。
-
body必须是字符串，用JSON.stringify({}) - 必须显式设置
headers: { 'Content-Type': 'application/json' } - 如果后端要求带认证，通常加
Authorization字段
示例：
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer abc123'
},
body: JSON.stringify({ email: 'a@b.c', password: '123' })
});
如何带 cookie 和保持登录态
默认情况下，fetch 不发送 cookie，即使当前域名下已有有效 cookie。
- 必须加
credentials: 'include'选项（类似 jQuery 的xhrFields: { withCredentials: true }） - 若后端是跨域，还需返回
Access-Control-Allow-Credentials: true，且不能设Access-Control-Allow-Origin: *（得写具体域名） - 开发时注意：localhost 和 127.0.0.1 被视为不同源，cookie 不共享
AbortController 控制请求生命周期
用户快速切换页面、输入搜索关键词时频繁发请求，旧请求没用还占资源 —— 这时候得取消。
- 创建
const controller = new AbortController() - 在
fetch选项中传signal: controller.signal - 调用
controller.abort()即可中止（触发catch，错误类型为AbortError） - React/Vue 组件卸载、输入框防抖取消等场景都靠它
注意：AbortController 在 IE 中不可用，需 polyfill 或降级处理。
真正麻烦的不是怎么发请求，而是怎么统一处理 token 过期、重试逻辑、错误提示、loading 状态 —— 这些没法靠一个 fetch 调用解决，得封装成函数或用库（比如 swr、react-query），但底层还是绕不开上面几条。
