在React应用里，数据流管理直接影响页面响应与用户体验。虽然fetch API使用简单，但XMLHttpRequest（XHR）在进度追踪、请求中断等场景下仍不可替代。理解如何在React中正确封装与优化XHR，是构建健壮前端应用的基础。
为什么在React中仍要使用XMLHttpRequest
相比fetch，XHR最大的优势是原生支持上传与下载进度事件，且能方便地调用abort()中断请求。在文件上传、大体积数据拉取等场景中，这些能力非常关键。
- 可监听progress事件获取实时进度
- 通过abort()随时取消请求，避免多余网络开销
- 兼容老旧浏览器与环境，无需polyfill
在函数组件中封装XHR请求
使用useEffect与useRef可以安全地管理XHR实例生命周期，防止组件卸载后更新状态导致警告。
import { useEffect, useRef, useState } from 'react';
function useXhrGet(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const xhrRef = useRef(null);
useEffect(() => {
const xhr = new XMLHttpRequest();
xhrRef.current = xhr;
xhr.open('GET', url, true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
setData(JSON.parse(xhr.responseText));
}
setLoading(false);
};
xhr.onerror = function () {
setLoading(false);
};
setLoading(true);
xhr.send();
return () => {
// 组件卸载时中断请求
xhr.abort();
};
}, [url]);
return { data, loading };
}
优化实践：进度监控与错误重试
在下载场景中，可通过监听progress事件将进度写入状态；若请求失败，可结合指数退避策略进行有限次重试。
function fetchWithRetry(url, retries = 3) {
return new Promise((resolve, reject) => {
let attempt = 0;
function request() {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.responseText);
} else if (attempt < retries) {
attempt++;
setTimeout(request, 1000 * attempt);
} else {
reject(new Error('请求失败'));
}
};
xhr.onerror = function () {
if (attempt < retries) {
attempt++;
setTimeout(request, 1000 * attempt);
} else {
reject(new Error('网络错误'));
}
};
xhr.send();
}
request();
});
}
避免常见陷阱
在React中直接使用XHR时，注意以下要点：
| 问题 | 解决方式 |
|---|---|
| 组件卸载后设置状态 | 在cleanup中调用xhr.abort() |
| 多次渲染重复请求 | 合理设置依赖数组或使用缓存 |
| 响应数据未序列化 | 使用JSON.parse处理responseText |
使用code标签说明术语
在代码中出现的XMLHttpRequest对象是浏览器提供的原生接口，而abort()方法用于终止当前连接。
在实际项目中，应根据场景选择fetch或XHR。需要进度与中断控制时，XHR仍是务实选择。
总结
在React应用里优化XMLHttpRequest，核心在于生命周期管理、请求中断与重试机制。通过自定义Hook封装，既能复用逻辑，也能保障稳定性。
ReactXMLHttpRequest数据流修改时间：2026-07-28 12:06:20