最推荐使用 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 更可控——选哪个，看你的需求和兼容要求就行。
立即学习“Java免费学习笔记（深入）”；
以上就是如何使用JavaScript进行网络请求_fetch API和XMLHttpRequest有什么区别呢的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544570.html
微信扫一扫 
支付宝扫一扫 
