本文介绍两种可靠方式：一是利用 http `range` 请求头精准获取指定字节数（推荐），二是结合 `abortcontroller` 安全中断流式读取，避免重复调用失败问题。
在前端开发中，有时我们仅需下载远程资源的前 N 字节（例如解析文件头、检测 MIME 类型或预览内容），而非整个大文件。直接使用 fetch + ReadableStream 手动截断（如 reader.cancel()）看似可行，但存在明显缺陷：多次调用同一 URL 时可能失败——这是因为部分浏览器（尤其是 Chrome）对已缓存响应的流读取行为不一致，cancel() 后未完全释放资源，导致后续请求复用缓存流时 getReader() 抛出异常。
✅ 推荐方案：使用 HTTP Range 请求头（服务端协同）
最高效、语义清晰且兼容性好的方式是向服务器明确请求指定字节范围：
async function downloadRange(url, maxBytes) {
try {
// 先发 HEAD 请求获取真实内容长度（可选，用于容错）
const headResponse = await fetch(url, { method: 'HEAD' });
const contentLength = parseInt(headResponse.headers.get('content-length') || '0', 10);
// 若文件小于 maxBytes，直接全量获取；否则限定范围
const endByte = Math.min(maxBytes - 1, contentLength - 1);
const rangeHeader = `bytes=0-${endByte}`;
const response = await fetch(url, {
headers: { 'Range': rangeHeader }
});
if (response.status === 206) { // Partial Content — 成功返回范围数据
const arrayBuffer = await response.arrayBuffer();
const str = new TextDecoder().decode(arrayBuffer);
return str;
} else if (response.status === 200 && contentLength <= maxBytes) {
// 文件本身很小，服务器忽略 Range，返回完整内容
const arrayBuffer = await response.arrayBuffer();
return new TextDecoder().decode(arrayBuffer);
} else {
throw new Error(`Unexpected response: ${response.status} ${response.statusText}`);
}
} catch (error) {
console.error('Download failed:', error);
throw error;
}
}
// 示例：下载前 2MB
downloadRange('https://speed.hetzner.de/1GB.bin', 2 * 1024 * 1024)
.then(data => console.log('First 2MB length:', data.length));
✅ 优势： 服务端直接截断传输，节省带宽与时间； 无流状态残留，可安全重复调用； 响应头 Content-Range 明确标识范围，便于调试。
⚠️ 前提条件：目标服务器必须支持 Range 请求（即返回 Accept-Ranges: bytes）。静态文件服务器（如 Nginx、Apache、CDN）通常默认支持；若不确定，可用 curl -I
⚙️ 备选方案：使用 AbortController 中断 fetch（客户端控制）
当无法依赖 Range（如服务器不支持或需动态逻辑判断）时，应改用 AbortController 主动终止请求，而非依赖 reader.cancel()：
立即学习“Java免费学习笔记（深入）”；
async function downloadWithAbort(url, maxBytes) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000); // 可选超时
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;
const chunks = [];
while (bytesRead < maxBytes) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
bytesRead += value.length;
}
// ✅ 关键：调用 reader.releaseLock() 而非 cancel()，避免流污染
reader.releaseLock();
// 合并 Uint8Array
const totalLength = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
const result = new Uint8Array(totalLength);
let offset = 0;
for (const chunk of chunks) {
result.set(chunk, offset);
offset += chunk.length;
}
return new TextDecoder().decode(result);
} catch (error) {
if (error.name === 'AbortError') {
console.log('Download aborted due to size limit or timeout');
} else {
console.error('Fetch error:', error);
}
throw error;
} finally {
clearTimeout(timeoutId);
}
}
? 关键改进点：
- 使用 AbortController.signal 让 fetch 本身可被中断（现代浏览器均支持）；
- reader.releaseLock() 替代 reader.cancel()，确保流资源正确释放，避免后续请求复用失败；
- 移除对 cancel() 的依赖，从根本上解决“第二次调用崩溃”问题。
? 总结与建议
| 方案 | 适用场景 | 是否推荐 | 注意事项 |
|---|---|---|---|
| Range 请求头 | 服务器支持分段下载、目标明确（如固定前 N 字节） | ✅ 强烈推荐 | 需验证 Accept-Ranges 响应头 |
| AbortController + releaseLock() | 服务器不支持 Range，或需运行时动态判断（如边读边解析） | ⚠️ 备选 | 仍会下载多余字节（至中断点），但稳定性高 |
无论采用哪种方式，请始终进行错误处理、设置合理超时，并在生产环境测试不同 CDN 和服务器的行为差异。对于高频调用，还可结合 Service Worker 缓存首屏所需字节，进一步提升性能。