最推荐使用 fetch API；它基于 Promise、语法简洁、支持 async/await，但需手动处理 HTTP 错误、超时和 Cookie；XHR 更底层、兼容性好、支持原生超时与进度控制，适合复杂场景。
用 JavaScript 发起网络请求，现在最推荐的方式是 fetch API；它比传统的 XMLHttpRequest（XHR） 更简洁、更符合现代 JavaScript 的设计逻辑。两者都能发请求，但写法、错误处理、默认行为和兼容性差异挺大。
fetch API：更现代、基于 Promise
fetch 是浏览器原生提供的、基于 Promise 的接口，语法干净，天然支持 
async/await：
- 默认只拒绝网络错误（如断网），404、500 这类 HTTP 错误不会触发 catch，需要手动检查
response.ok或response.status - 不支持原生超时控制（需配合
AbortController实现） - 默认不带 cookie，如需携带要显式加
credentials: 'include' - 上传文件、发送 JSON 数据都很直观，比如：
fetch('/api/user', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) })
XMLHttpRequest：更底层、回调风格
XHR 是老标准，功能全但写法冗长，依赖事件监听和回调：
- 有明确的
readyState变化过程（0–4），适合需要精细控制加载状态的场景（比如进度条） - 原生支持超时设置（
xhr.timeout = 5000）和取消（xhr.abort()） - 默认会携带 cookie（同源时），行为更接近传统表单提交
- 处理响应需手动解析：
xhr.responseType = 'json'或JSON.parse(xhr.responseText)
关键区别速查
-
错误处理：fetch 对 HTTP 错误静默成功；XHR 的
onerror只在真正网络失败时触发，HTTP 状态码需自己判断 -
中断请求：fetch 需靠
AbortController；XHR 直接调.abort() - 兼容性：fetch 在 IE 中完全不支持（需 polyfill）；XHR 所有浏览器都支持
-
流式读取：fetch 支持
response.body.getReader()流式处理大响应；XHR 不支持
什么时候选哪个？
- 新项目、简单 CRUD 请求 → 优先用 fetch + async/await
- 需要上传进度、兼容 IE、或必须用超时/中止等细粒度控制 → XMLHttpRequest 更稳妥
- 想兼顾现代语法与健壮性？可封装 fetch，自动检查
response.ok、添加超时逻辑、统一错误抛出
基本上就这些。fetch 更轻快，XHR 更可控——选哪个，看你的需求和兼容要求就行。
