XMLHttpRequest重试应基于onloadend事件和status≥500判断,而非仅依赖status===0或statusText==="";fetch重试需捕获AbortError、检查response.ok,并结合指数退避与最大重试次数。

上传失败时 XMLHttpRequest 的重试判断依据是什么
不能只看 status === 0 或 statusText === "" 就重试——这可能是用户断网、跨域拦截、CORS 预检失败,也可能是服务端根本没收到请求。真正可重试的失败,必须满足:请求已发出、服务端有响应(哪怕 5xx)、且错误非客户端逻辑错误(如文件过大、类型不符)。XMLHttpRequest 的 onerror 事件无法区分网络中断和 CORS 拒绝,而 onloadend + status >= 500 才是较可靠的重试信号。
用 fetch 实现带退避策略的重试
fetch 默认不 reject 网络错误(如断连),需手动检查 response.ok 和捕获 AbortError;同时要避免无限重试或雪崩式并发。建议封装一个带指数退避和最大重试次数的函数:
function uploadWithRetry(file, url, options = {}) {
const { maxRetries = 3, baseDelay = 1000 } = options;
const upload = async (retryCount = 0) => {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000);
try {
const formData = new FormData();
formData.append('file', file);
const res = await fetch(url, {
method: 'POST',
body: formData,
signal: controller.signal
});
clearTimeout(timeoutId);
if (res.ok) return res;
if (res.status >= 500 && retryCount < maxRetries) {
const delay = baseDelay * Math.pow(2, retryCount) + Math.random() * 100;
await new Promise(r => setTimeout(r, delay));
return upload(retryCount + 1);
}
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
} catch (err) {
clearTimeout(timeoutId);
if (err.name === 'AbortError' && retryCount < maxRetries) {
const delay = baseDelay * Math.pow(2, retryCount) + Math.random() * 100;
await new Promise(r => setTimeout(r, delay));
return upload(retryCount + 1);
}
throw err;
}};
return upload();
}
重试时如何避免重复上传同一文件
前端重试本身不产生重复文件,但若服务端未做幂等处理(如未校验 Content-MD5 或请求唯一 ID),多次重试可能写入多份。解决方式分两端:
立即学习“前端免费学习笔记(深入)”;
- 前端:在
FormData中附加唯一请求标识,如formData.append('request_id', crypto.randomUUID())(注意兼容性,可用Date.now() + Math.random()降级) - 服务端:必须基于该
request_id或文件哈希做去重判断,否则前端重试毫无意义 - 切勿在重试时重新读取
file.arrayBuffer()——大文件反复读取会阻塞主线程,应提前缓存或使用ReadableStream分块上传
移动端 Safari 对重试的特殊限制
iOS 15+ 的 Safari 在后台标签页中会冻结 fetch 和 XMLHttpRequest,导致超时后重试直接失败,且不触发 AbortError。此时仅靠前端无法恢复,必须配合服务端断点续传能力。实际做法是:
- 首次上传前先发一个
HEAD请求,获取服务端是否已存在该文件(通过文件名 + 时间戳或 ETag) - 上传采用分片(
blob.slice()),每片携带序号和总片数,失败后只重传当前片 - 禁用自动重试,改由用户点击「继续上传」触发,避免在不可控状态下盲目重发
没有服务端配合的纯前端重试,在 iOS Safari 上大概率只是把失败日志多打几遍。











