fetch() 是现代 JavaScript 发起网络请求的事实标准，比 XMLHttpRequest 更简洁、符合 Promise 语义且易配合 async/await；但需注意它对 404/500 状态码仍 resolve，须手动检查 response.ok 或 status，并显式配置 credentials、headers、body 及手动解析响应体。
fetch() 是现在最该用的 AJAX 方式
现代 JavaScript 中，fetch() 已成为发起网络请求的事实标准，它比老式的 XMLHttpRequest 更简洁、更符合 Promise 语义，也更容易配合 async/await 使用。浏览器兼容性方面，Chrome 42+、Firefox 39+、Safari 10.1+、Edge 14+ 都已原生支持，如果需要兼容 IE，得加 polyfill 或换方案。
常见错误是直接用 fetch(url) 后就以为拿到了数据——其实它只返回一个 Promise，且 **即使 HTTP 状态码是 404 或 500，Promise 依然 resolve**，必须手动检查 response.ok 或 response.status。
-
fetch()默认不带 cookie，需显式传{ credentials: 'include' }才能发带凭证的请求 - POST 请求必须设置
headers和body，比如发送 JSON 要写JSON.stringify(data)并设'Content-Type': 'application/json' - 响应体不是自动解析的，要用
response.json()、response.text()或response.blob()手动读取
async function getUser(id) {
try {
const response = await fetch(`/api/users/${id}`, {
method: 'GET',
headers: { 'Accept': 'application/json' }
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (err) {
console.error('请求失败:', err);
throw err;
}
}
XMLHttpRequest 还有必要学吗？
除非维护老项目或需要精细控制上传进度、取消请求（abort()）、或处理流式响应（如长轮询），否则不建议新代码用 XMLHttpRequest。它的回调嵌套深、API 设计反直觉（比如 onreadystatechange 需要判断 readyState === 4 和 status >= 200 && status ）。
容易踩的坑：
立即学习“Java免费学习笔记（深入）”；
- 忘记调用
xhr.open()就直接xhr.send()→ 报错 “Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED” - 没设
Content-Type头却传了 JSON 字符串 → 后端可能收不到req.body - 把
xhr.responseText当成已解析对象用 → 实际是字符串，得JSON.parse()
axios 适合什么场景？
axios 是基于 fetch 封装的第三方库，优势在于：默认 JSON 解析、自动转换请求/响应数据、内置超时、拦截器、取消请求（CancelToken 或 AbortController）、对 GET 参数自动序列化（params 选项）。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
但要注意：
- 它不会自动带上 cookie，仍需配置
withCredentials: true - 4xx/5xx 响应默认会 reject，这点和
fetch不同，别误以为“没报错就成功了” - 全局拦截器里修改 config 后，记得
return config，否则请求发不出去 - Node.js 环境下需用
axios的http适配器，浏览器里用的是XMLHttpRequest或fetch（取决于版本）
跨域请求被拦住怎么办？
浏览器报错 “CORS header ‘Access-Control-Allow-Origin’ missing” 或 “No ‘Access-Control-Allow-Origin’ header”，本质是服务端没配好 CORS 响应头。前端不能绕过这个限制（除了用代理或 JSONP，但 JSONP 只支持 GET 且不安全）。
开发阶段常用解法：
- 后端响应头加
Access-Control-Allow-Origin: *（仅限测试，生产环境需指定域名） - Vite / Webpack Dev Server 配
proxy，把/api请求代理到后端地址，让请求变成同源 - 用浏览器插件临时禁用 CORS（仅调试用，不可用于验证逻辑）
真正上线时，跨域必须由后端配合解决；前端强行“修”只是掩耳盗铃。
最后提醒一句：别在 fetch 或 axios 的 then() 里写大量业务逻辑，容易失控。统一用 try/catch 或 .catch() 处理错误，把数据解析、状态更新、UI 反馈拆开，才好维护。
