推荐使用 fetch 发起网络请求,它更简洁、基于 Promise,但需显式配置 credentials: 'include' 才携带 Cookie,不自动 reject HTTP 错误状态码,且 POST 时 body 与 Content-Type 必须匹配。

原生 JavaScript 发起网络请求,fetch 是当前推荐方式;XMLHttpRequest(即传统 AJAX)已不建议新项目使用,仅需在兼容老浏览器或特殊场景下考虑。
fetch 比 XMLHttpRequest 更简洁,但默认不带 cookie
fetch 语法更现代、基于 Promise,天然支持 async/await;但默认不会发送 Cookie,遇到需要登录态的接口会 401 或返回未登录数据。
- 必须显式加
credentials: 'include'才能携带 Cookie('same-origin'仅同源时发,'omit'完全不发) -
XMLHttpRequest默认就发 Cookie(除非手动设withCredentials = false) -
fetch不支持 progress 事件(上传/下载进度需用ReadableStream手动解析,较麻烦)
fetch 不会自动 reject HTTP 错误状态码
fetch 只在网络失败(如断网、DNS 失败、跨域被拦)时 reject;而 404、500 这类响应仍算“成功”,response.ok 为 false,但 Promise 不中断。
- 常见写法:
if (!response.ok) throw new Error(`${response.status} ${response.statusText}`) -
XMLHttpRequest的onerror不触发 4xx/5xx,同样得手动检查status - 别直接
await fetch(...).json()—— 若接口返回非 JSON(如 HTML 错误页),会抛Unexpected token解析错误
POST 请求中 body 和 Content-Type 要匹配
传参格式错配是 fetch 最常踩的坑,后端收不到数据往往卡在这步。
立即学习“Java免费学习笔记(深入)”;
- 发 JSON:
body: JSON.stringify({a: 1})+headers: {'Content-Type': 'application/json'} - 发表单:
body: new URLSearchParams({a: '1'})(自动设Content-Type: application/x-www-form-urlencoded) - 用
FormData传文件或混合字段:不用设Content-Type,浏览器会自动生成带 boundary 的multipart/form-data -
XMLHttpRequest同样要手动setRequestHeader,但 FormData 行为一致
真正难的不是选 fetch 还是 XMLHttpRequest,而是理解每个配置项实际影响哪一层(网络层?HTTP 头?响应体解析?),尤其跨域、认证、重定向这些边界情况,一不留神就静默失败。











