fetch()和axios是替代传统ajax的主流方案；fetch是原生api，语法简洁、支持async/await，但需手动处理错误、cookie和超时；axios封装完善，适合统一拦截和进度控制，但包体积大且不支持ie11以下；xmlhttprequest仅在需上传进度监听或兼容ie9/10时使用。
Ajax 本身不是“能替代异步请求”的东西，它就是一种实现异步请求的技术手段；真正该问的是：**哪些现代方案可以替代传统 Ajax（即 XMLHttpRequest）写法？** 答案很明确：fetch()、axios 是主流替代，而 XMLHttpRequest 应该只在需兼容 IE9 及更老浏览器时保留。
为什么 fetch() 是最直接的 Ajax 替代
fetch() 不是库，是浏览器原生 API，语法比 XMLHttpRequest 少写 70% 的样板代码。它用 Promise 封装整个生命周期，天然支持 async/await，避免嵌套回调。
- 不自动处理 HTTP 错误：
response.status === 404不会 reject，必须手动检查!response.ok - 默认不带 cookie：
credentials: 'include'才会发送 Cookie，否则跨域登录态会丢失 - 没有进度监听：上传大文件时无法像
XMLHttpRequest.upload.onprogress那样监听进度 - 超时需手动控制：得配合
AbortController实现，例如const controller = new AbortController(); fetch(url, { signal: controller.signal })
axios 适合需要统一拦截和错误处理的项目
如果你的项目已有 axios，或需要请求前自动加 token、响应失败统一弹 toast、上传下载进度可视化——axios 比 fetch() 更省心。它把常见需求都封装成了配置项。
-
axios.get('/api/user', { params: { id: 123 } })自动拼 query string，不用手拼 URL -
axios.defaults.headers.common['Authorization'] = 'Bearer xxx'全局设 header - 拦截器可复用：
axios.interceptors.response.use(res => res, err => { if (err.response?.status === 401) logout() }) - 不支持 IE11 以下；若用 Webpack 打包，注意它默认不 tree-shake，引入整个库可能增大包体积
XMLHttpRequest 还有必要学吗
有必要，但仅限两种情况：需要精细控制上传进度（如大文件分片上传），或维护一个仍要支持 IE9/IE10 的老系统。否则，写 new XMLHttpRequest() + onreadystatechange 就是给自己加维护成本。
- 兼容性陷阱：IE6–IE8 用
ActiveXObject，写法完全不同，现在几乎没人真测 - 状态判断易错：
readyState === 4 && status === 200缺一不可，漏掉status会导致 500 响应也被当成功 - POST 请求必须手动设头：
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')，漏了后端收不到数据 - 返回 JSON 要自己
JSON.parse(responseText)，fetch()和axios默认帮你做了
真正容易被忽略的点是：**所有替代方案都无法绕过 CORS 和凭证策略限制**。无论你用 fetch()、axios 还是 XMLHttpRequest，只要跨域且要带 Cookie，后端就必须返回 Access-Control-Allow-Origin: * 不行，得指定具体域名，还得加 Access-Control-Allow-Credentials: true。这点没配对，前端换啥库都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
