Promise、Fetch、Axios、XHR、jQuery AJAX 完整对比
我给你做最清晰、最直白、前端面试必问 的版本，一次性讲透它们的关系、区别、用法、优缺点。
一、先搞懂它们的层级关系（最重要）
底层：XHR（浏览器原生请求对象）
↑
封装1：jQuery AJAX（基于 XHR）
↑
新标准：Fetch（浏览器原生，基于 Promise）
↑
封装2：Axios（基于 XHR 封装，返回 Promise）
↑
语法糖：async/await（简化 Promise 写法）一句话总结：
- XHR：最原始、最底层
- jQuery：老时代的封装
- Fetch：浏览器原生新 API，Promise 风格
- Axios：最流行、最强大、最推荐的请求库
- Promise：异步处理方案，不是请求工具
二、核心区别对比表（直接背）
| 特性 | XHR | jQuery AJAX | Fetch | Axios |
|---|---|---|---|---|
| 本质 | 原生请求对象 | 基于 XHR 封装 | 原生 Promise API | 基于 XHR + Promise 封装 |
| 是否 Promise | 否 | 老版本否，新版本支持 | 是 | 是 |
| 自动解析 JSON | 否 | 是 | 需手动 .json() | 是 |
| 请求拦截 | 无 | 无 | 无 | 有 |
| 响应拦截 | 无 | 无 | 无 | 有 |
| 取消请求 | 复杂 | 支持 | 支持 | 简单 |
| 超时处理 | 麻烦 | 支持 | 不支持 | 支持 |
| 错误处理 | 复杂 | 一般 | 只断网才 reject | 状态码错误自动 reject |
| 流行度 | 过时 | 过时 | 一般 | 最高 |
| 推荐度 | 不推荐 | 不推荐 | 一般 | 强烈推荐 |
三、每种写法示例（直观感受区别）
1. XHR（最原始，代码又臭又长）
js
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
}
};
xhr.send();2. jQuery AJAX（曾经的王者）
js
$.ajax({
url: '/api/data',
type: 'GET',
success: (res) => { },
error: (err) => { }
});3. Fetch（原生 Promise，但坑很多）
js
fetch('/api/data')
.then(res => res.json()) // 必须手动转 JSON
.then(data => { })
.catch(err => { })⚠️ Fetch 大坑：
- 404/500 不会进入 catch
- 无法超时
- 不支持请求拦截
4. Axios（最优雅、最强大）
js
axios.get('/api/data')
.then(res => {
// 直接拿到数据，无需解析
})
.catch(err => {
// 错误统一捕获
});四、最重要的 4 个区别（面试高频）
1. 错误处理机制不同
- XHR / Fetch：404、500 不算错误
- Axios ：只要状态码不是 2xx，自动进入 catch
2. 数据处理不同
- Axios：自动转 JSON
- Fetch ：必须手动调用
.json() - XHR ：必须手动
JSON.parse()
3. 功能强弱不同
- Axios 独有的王牌功能 ：
- 请求/响应拦截器
- 取消请求
- 超时设置
- 防止 XSRF
- 并发请求
- Fetch / XHR / jQuery 都没有这些功能
4. 使用场景不同
- XHR：底层原理，几乎不用
- jQuery：老项目维护
- Fetch：不想引库、简单需求
- Axios ：企业开发、Vue/React 项目、99% 前端首选
五、最终结论（最实用）
- 日常开发永远首选 Axios
- Fetch 是原生但不好用
- XHR 是底层原理
- jQuery 已经过时
- Promise 是异步基础，不是请求工具
总结
- XHR：最原始请求方式
- jQuery：基于 XHR 的旧封装
- Fetch：浏览器原生 Promise API
- Axios ：基于 XHR + Promise 的最强请求库
- Promise：异步解决方案，被 Fetch/Axios 使用
超清晰总结：Promise / XHR / Fetch / Axios / jQuery 在 浏览器 和 Node.js 环境是否可用
我直接给你最准确、最实用、面试必背的结论👇
1. 一句话总表（直接背）
| 技术 | 浏览器 | Node.js | 说明 |
|---|---|---|---|
| Promise | ✅ 支持 | ✅ 支持 | 两者都是原生 JS |
| XHR | ✅ 支持 | ❌ 不支持 | 浏览器专属对象 |
| Fetch | ✅ 支持 | ⚠️ 需安装 | 浏览器原生；Node 需第三方包 |
| Axios | ✅ 支持 | ✅ 支持 | 跨平台之王，双环境完美运行 |
| jQuery AJAX | ✅ 支持 | ❌ 几乎不用 | 专为浏览器设计 |
2. 逐个详细说明
① Promise
- 浏览器：✅ 支持（所有现代浏览器 + IE11+）
- Node.js：✅ 支持（v4+ 就支持）
- 结论 ：双环境通用，是异步基础。
② XHR（XMLHttpRequest）
- 浏览器：✅ 原生支持
- Node.js ：❌ 没有这个对象
- 结论 ：浏览器专属，Node 不能直接用。
③ Fetch
- 浏览器：✅ 原生支持（现代浏览器）
- Node.js ：⚠️ 默认不自带 ，必须安装
node-fetch - 结论：浏览器原生；Node 需要额外安装。
④ Axios（最重要）
- 浏览器：✅ 原生支持（底层用 XHR）
- Node.js：✅ 原生支持（底层用 http 模块）
- 结论 ：唯一真正双环境零配置通用
自动适配环境，不用改代码！
⑤ jQuery AJAX
- 浏览器：✅ 支持
- Node.js：❌ 不支持（不适合服务端）
- 结论 ：浏览器专用，服务端不用。
3. 最关键结论（必须记住）
- Axios 是唯一在浏览器 + Node.js 都能直接用的请求库
- XHR、jQuery 只在浏览器能用
- Fetch 浏览器原生，Node 要装包
- Promise 两边都能用
最终记忆口诀
Axios 双环境，XHR 浏览器，Fetch 要安装，Promise 都通用。