如何使用JavaScript进行网络请求_fetch API和XMLHttpRequest有什么区别呢

陆砚码

2026-10-15 • 👁 0人浏览过

最推荐使用 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 是老标准，功能全但写法冗长，依赖事件监听和回调： Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载有明确的

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免费学习笔记（深入） ”；

相关文章