当前位置：首页 > news >正文

XMLHttpRequest vs Fetch API：一场跨越时代的“浏览器宫斗剧“

news 来源：原创 2025/8/22 10:36:39

## 序幕：两个API的"身世之谜"

在Web开发的江湖里，XMLHttpRequest（简称XHR）就像一位身经百战的老将，而Fetch API则是手持光剑的绝地武士。让我们先来段"DNA检测"：

- **XHR（2006出道）**
"AJAX的初恋对象"
特点：事件驱动、回调地狱种子选手、自带进度监控

- **Fetch（2015登场）**
"Promise的模范生"
特点：基于Promise、流式处理专家、CORS配置达人

举个栗子🌰：当你想从服务器获取猫猫图片时
```javascript
// XHR写法（古典派）
const xhr = new XMLHttpRequest();
xhr.open('GET', '/cats');
xhr.onload = () => {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();

// Fetch写法（现代派）
fetch('/cats')
.then(response => response.json())
.then(cats => console.log(cats));
```

## 第一幕：核心机制大揭秘

### 1.1 底层传输的"内功心法"
XHR的"经脉运行图"：
```
[初始化] → [配置请求] → [发送] → [onreadystatechange]
→ [状态检测] → [数据处理]
```

Fetch的"真气循环"：
```
[Request对象] → [fetch发起] → [Promise链]
→ [Stream处理] → [数据转换]
```

### 1.2 错误处理的"求生指南"
XHR的错误处理像扫雷游戏：
```javascript
xhr.onerror = () => {
console.log('你的网络比蜗牛还慢！');
};
xhr.ontimeout = () => {
console.log('服务器去火星旅游了？');
};
```

Fetch的错误处理像闯关游戏：
```javascript
fetch('/api')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.catch(error => {
console.log(`捕获到野生错误: ${error}`);
});
```

## 第二幕：六大实战场景终极PK

### 2.1 大文件上传进度条
XHR的"专属技能"：
```javascript
xhr.upload.onprogress = (e) => {
const percent = (e.loaded / e.total) * 100;
console.log(`上传进度：${percent}%`);
};
```

Fetch的"黑科技"（通过ReadableStream）：
```javascript
const controller = new AbortController();
fetch('/upload', {
method: 'POST',
body: new ReadableStream({
start(controller) {
// 流式写入数据
}
}),
signal: controller.signal
});
```

### 2.2 请求超时控制
XHR的"定时炸弹"：
```javascript
xhr.timeout = 5000; // 5秒定时器
xhr.ontimeout = () => {
console.log('请求超时，请检查你的网络！');
};
```

Fetch的"组合技"：
```javascript
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => reject(new Error('请求超时')), 5000);
});

Promise.race([
fetch('/api'),
timeoutPromise
]).then(/*...*/);
```

## 第三幕：你不知道的高级玩法

### 3.1 请求缓存策略
XHR的"手动挡模式"：
```javascript
xhr.open('GET', '/data', true);
xhr.setRequestHeader('Cache-Control', 'max-age=3600');
```

Fetch的"自动驾驶模式"：
```javascript
fetch('/data', {
cache: 'force-cache' // 可选值：default/no-store/reload/force-cache
});
```

### 3.2 跨域请求的"安全卫士"
XHR的复杂配置：
```javascript
xhr.withCredentials = true; // 携带cookie
```

Fetch的优雅处理：
```javascript
fetch('/api', {
credentials: 'include', // 可选值: omit/same-origin/include
mode: 'cors'
});
```

## 第四幕：性能优化秘籍

### 4.1 内存管理对比
| 操作 | XHR内存占用 | Fetch内存占用 |
|---------------|-------------|---------------|
| 10MB文件下载 | 10MB | 流式处理≈2MB |
| 1000并发请求 | 高 | 低 |
| 长轮询 | 一般 | 优秀 |

### 4.2 调试技巧宝典
**XHR调试三连：**
1. 在Chrome开发者工具勾选"Log XMLHttpRequests"
2. 使用xhr.addEventListener('readystatechange', debug)
3. 检查readyState的4个阶段

**Fetch调试三式：**
1. 在控制台使用`await fetch(...)`直接查看响应
2. 使用`response.clone()`防止流被消费
3. 配合`navigator.onLine`检测网络状态

## 第五幕：未来战场预测

### 5.1 即将到来的新特性
- **Fetch的"超级进化"**
```javascript
// 实验性功能：优先级设置
fetch('/critical-data', {
priority: 'high' // low/auto/high
});

// 请求保持活跃
fetch('/keepalive', {
keepalive: true
});
```

### 5.2 终极选择指南
| 场景 | 推荐API | 理由 |
|----------------------|---------------|-------------------------------|
| 文件上传进度显示 | XMLHttpRequest | 原生支持上传进度事件 |
| REST API调用 | Fetch | 简洁的Promise链式调用 |
| 需要取消的请求 | Fetch | 配合AbortController更优雅 |
| 兼容IE11 | XMLHttpRequest | Fetch需要polyfill |

## 终章：开发者生存指南

当你在深夜加班时：
- 遇到老项目维护 → 拥抱XHR的兼容性
- 开发新功能 → 投入Fetch的怀抱
- 需要流式处理 → 选择Fetch的ReadableStream
- 要取消请求 → 使用AbortController

最后记住：没有最好的API，只有最合适的场景。就像你不能用瑞士军刀砍树，也不能用电锯开红酒瓶——选对工具才是王道！

**彩蛋：** 试试在控制台输入这个魔法代码，查看浏览器对两种API的支持情况：
```javascript
console.log('XHR支持度:', !!window.XMLHttpRequest);
console.log('Fetch支持度:', !!window.fetch);
```

**如果这篇指南让你少加了一天班，记得点赞关注！下期预告：《WebSocket与SSE：实时通信的冰与火之歌》**

相关文章：