前端异步请求从 XMLHttpRequest 到 Fetch 是怎么演进的？

在Web开发演进的长河中，异步数据请求始终是构建动态网页的核心技术。从1999年诞生的XMLHttpRequest（XHR）到2015年问世的Fetch API，这场持续二十年的技术迭代不仅改写了前端开发模式，更折射出Web标准发展的深层逻辑。本文将深入剖析两个时代的异步请求方案，揭示其演进背后的技术驱动力。

一、XMLHttpRequest：异步通信的奠基者

1.1 XHR的技术实现

作为Ajax技术的核心载体，XMLHttpRequest对象通过事件监听机制实现了局部页面更新：
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
```
关键技术特征：
基于事件驱动的回调机制
支持同步/异步两种模式
需手动处理请求状态（readyState）
原生支持XML数据解析

1.2 XHR的历史局限性

随着Web应用复杂度提升，XHR逐渐暴露三大痛点：
1. 回调地狱：多层嵌套的回调函数影响代码可读性
2. 配置繁琐：需要手动设置请求头、处理超时等
3. 功能缺失：缺乏对现代数据格式（如Stream）的原生支持

二、Fetch API：现代请求的标准化方案

2.1 Fetch的技术突破

Fetch API基于Promise规范重构了网络请求范式：
```javascript
fetch('https://api.example.com/data')
.then(response => {
if(!response.ok) throw new Error('HTTP error');
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('请求失败:', error));
```
核心优势对比：

2.2 Fetch的进阶特性

1. 请求拦截：通过Service Worker实现网络拦截
2. 数据流处理：response.body.getReader()实现分块读取
3. 超时控制：结合AbortController实现精准超时管理

```javascript
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch(url, {
signal: controller.signal
}).catch(err => {
if(err.name === 'AbortError')
console.log('请求超时');
});
```

三、技术选型指南：何时使用何种方案

3.1 Fetch的适用场景

需要简洁的Promise语法
处理Streaming数据（如大文件下载）
需要Service Worker集成
现代浏览器环境开发

3.2 XHR的保留阵地

1. 上传进度追踪：
```javascript
xhr.upload.onprogress = function(e) {
const percent = (e.loaded / e.total) 100;
};
```
2. 低版本浏览器兼容（IE9+）
3. 同步请求（特定场景需要）

四、演进背后的技术哲学

从XHR到Fetch的演进体现了三个技术趋势：
1. 语法范式转变：从回调函数到Promise/Async语法
2. 功能模块解耦：将请求、响应、数据解析分离
3. 标准规范统一：逐步取代浏览器专属API

结语：面向未来的请求方案

虽然Fetch已成为现代Web开发的主流选择，但技术演进从未停止。值得关注的新趋势包括：
基于WebTransport的下一代通信协议
WebSocket的二进制数据传输优化
WASM环境下的高性能网络模块

建议开发者根据目标浏览器支持度、项目功能需求、团队技术栈等因素进行技术选型。掌握两种方案的实现原理，才能在技术浪潮中保持竞争力。