现代 JavaScript 推荐用 fetch 发起 GET 请求，最简写法为 fetch('/api/user')，但需注意默认不带 cookie、HTTP 错误码不会自动 reject，且响应体需手动解析。
用 fetch 发起 GET 请求最简写法
现代 JavaScript 推荐直接用 fetch，它比 XMLHttpRequest 更简洁、更符合 Promise 语义。发起一个基础 GET 请求只需一行核心代码，但要注意它**默认不带 cookie，且不会自动 reject 网络错误（如 404、500）**。
-
fetch返回 Promise，但只在网络失败（如断网、DNS 错误）时 reject；HTTP 状态码如 404、500 仍会 resolve，需手动检查response.ok或response.status - 若需携带 cookie，必须显式传
{ credentials: 'include' }，否则服务端收不到 session - 响应体不是 JSON 对象，而是
Response实例，需调用.json()、.text()等方法读取
fetch('/api/user')
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
POST 提交 JSON 数据要设好 headers
用 fetch 发 POST 请求时，如果后端期待 Content-Type: application/json，就必须手动设置 headers，否则 Express、Django 等框架默认不解析请求体。
- 忘记设
headers是最常见 400 错误来源之一，后端日志常显示 “no JSON data” 或 “body is empty” -
body必须是字符串，所以得先JSON.stringify()，不能直接传对象 - GET 请求的 query 参数需手动拼接进 URL，
fetch不处理 URL 编码，要用URLSearchParams或encodeURIComponent
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(r => r.json())
.catch(e => console.error(e));
用 async/await 写更清晰的错误处理
链式 .then().catch() 容易漏掉中间环节的异常，尤其涉及多个异步步骤（如先 fetch 再处理数据再更新 DOM）时。async/await 让错误捕获更直观，也方便复用 try/catch 块。
- 不要在
await fetch(...)后直接await response.json()，因为.json()也可能抛错（如返回非 JSON 内容） - 建议把
response.json()封装成独立 await 步骤，并检查response.ok - 避免在顶层函数用
async却不await，会导致未处理的 Promise rejection
async function loadUser(id) {
try {
const response = await fetch(`/api/user/${id}`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json(); // 这里可能 SyntaxError
return data;
} catch (err) {
console.error('加载用户失败:', err.message);
throw err;
}
}
兼容旧浏览器时别硬扛，用 XMLHttpRequest 或 polyfill
IE11 及更早版本不支持 fetch，如果项目必须支持，不要自己重写全套逻辑。要么引入轻量 polyfill（如 whatwg-fetch），要么退回到 XMLHttpRequest —— 但注意它的回调机制和错误触发时机与 fetch 不同。
立即学习“Java免费学习笔记（深入）”；
-
XMLHttpRequest的onerror只在真正网络失败时触发，而onload总是执行，需手动判断xhr.status - 设置请求头用
xhr.setRequestHeader()，且必须在xhr.open()之后、xhr.send()之前 - IE 对
withCredentials（即 cookie）的支持从 IE10 开始，且需服务端明确允许（Access-Control-Allow-Credentials: true）
真正麻烦的不是语法，而是跨域、cookie、重定向、超时控制这些细节在两种 API 中行为不一致。能用 fetch 就别倒退，除非明确知道目标环境限制。
