本文介绍两种主流方案：利用 http `range` 请求头精准获取前 n 字节（推荐），或结合 `abortcontroller` 安全中止流式读取，避免重复调用失败问题。
在前端开发中，有时我们仅需下载远程资源的前若干字节（例如检测文件签名、预览文本头、计算哈希摘要等），而非完整加载整个大文件。若直接使用 fetch() + ReadableStream 手动读取并提前 reader.cancel()，虽逻辑可行，但存在一个关键缺陷：cancel() 并不会真正终止底层网络连接，且部分浏览器（尤其是 Chrome）会对同一 URL 的后续请求启用强缓存或连接复用机制，导致第二次调用时 fetch() 可能返回已中断的响应流，引发 TypeError: Failed to execute 'read' on 'ReadableStreamDefaultReader': ReadableStream is closed 等错误。
因此，更可靠、更符合 HTTP 语义的解决方案是 主动协商字节范围（Byte-Range）：
✅ 推荐方案：使用 Range 请求头（服务端支持前提下）
通过在 fetch 请求中添加 Range: bytes=0-N 头，明确告知服务器只需返回前 N+1 字节。服务端若支持（即响应含 Accept-Ranges: bytes），将返回状态码 206 Partial Content，且响应体严格限定为你请求的字节数。
async function downloadRange(url, maxBytes) {
try {
const response = await fetch(url, {
headers: { Range: `bytes=0-${maxBytes - 1}` }
});
if (response.status === 206) {
// 成功获取部分数据
const arrayBuffer = await response.arrayBuffer();
const result = new Uint8Array(arrayBuffer);
return result;
} else if (response.status === 200) {
// 服务端不支持 Range，返回了完整文件 → 截取前 maxBytes
console.warn('Server does not support Range requests; falling back to full download and truncation.');
const arrayBuffer = await response.arrayBuffer();
const full = new Uint8Array(arrayBuffer);
return full.slice(0, maxBytes);
} else {
throw new Error(`Unexpected status: ${response.status}`);
}
} catch (error) {
console.error('Download failed:', error);
throw error;
}
}⚠️ 注意事项：并非所有服务器都支持 Range（如某些 CDN 或静态托管服务可能禁用）。可通过 HEAD 请求预先探测： const headRes = await fetch(url, { method: 'HEAD' }); const acceptsRanges = headRes.headers.get('accept-ranges')?.toLowerCase() === 'bytes';若目标文件实际大小小于 maxBytes，Range 请求仍会返回完整内容（状态码 200），此时无需截断；若服务端严格校验（极少见），可能返回 416 Range Not Satisfiable，需捕获处理。
? 备选方案：AbortController + 流式读取（通用兼容）
若无法依赖 Range（如服务端不支持或需动态判断），可改用 AbortController 在读取过程中主动中止整个 fetch 请求，确保连接被彻底关闭，避免复用污染：
立即学习“Java免费学习笔记（深入）”；
async function downloadWithAbort(url, maxBytes) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000); // 可选超时保护
try {
const response = await fetch(url, { signal: controller.signal });
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const reader = response.body.getReader();
let bytesRead = 0;
let chunks = [];
while (bytesRead < maxBytes) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
bytesRead += value.length;
}
// ✅ 关键：取消 reader 后立即 abort controller，确保连接释放
reader.cancel("Download size limit reached.");
controller.abort(); // 显式中止 fetch
// 合并 chunk
const totalLength = chunks.reduce((sum, buf) => sum + buf.length, 0);
const result = new Uint8Array(totalLength);
let offset = 0;
for (const chunk of chunks) {
result.set(chunk, offset);
offset += chunk.length;
}
return result;
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted successfully.');
} else {
console.error('Download error:', error);
}
throw error;
} finally {
clearTimeout(timeoutId);
}
}? 总结建议
- 优先使用 Range 请求：语义清晰、网络开销最小、服务端可控，适合已知支持该特性的 API 或静态资源（如 Hetzner 测试文件）。
- AbortController 是兜底方案：适用于不可控服务端，但需注意其 abort() 会拒绝 Promise，需妥善处理 AbortError。
- 永远避免仅靠 reader.cancel()：它只关闭流，不终止连接，是造成“第二次调用失败”的根本原因。
- 实际项目中，可封装为智能策略：先 HEAD 探测 Accept-Ranges，支持则走 Range，否则降级至 AbortController 流式读取。
通过以上任一方式，你都能稳定、高效地获取远程资源的指定字节数，彻底规避原始代码的复用失效问题。
