本文介绍在 javascript 中通过 http `range` 请求头精准获取 url 前 n 字节数据的方法，避免完整下载大文件，解决 `fetch()` + `readablestream.cancel()` 多次调用失效的问题。
在前端开发中，若只需获取远程文件的头部数据（例如检测文件类型、读取元信息或预览前几 MB），完整下载整个大文件不仅浪费带宽，还会阻塞主线程、影响用户体验。你最初尝试的 ReadableStream.getReader().cancel() 方案虽逻辑合理，但在实际中存在两个关键问题：
- 浏览器缓存干扰：首次请求后，响应可能被强缓存（尤其对静态资源如 1GB.bin），后续 fetch() 会直接返回缓存响应，而缓存响应的 body 不支持流式中断，导致 reader.cancel() 无效或抛出异常；
- 流取消语义限制：reader.cancel() 仅终止流消费，并不中止底层网络连接——浏览器仍可能继续接收剩余数据（取决于实现），且该操作不可重复用于同一响应体。
✅ 更可靠、标准且高效的替代方案是：主动向服务器请求指定字节范围（Byte Range）。
✅ 推荐方案：使用 Range 请求头（服务端协作）
HTTP 协议原生支持按字节范围请求资源。只需在 fetch 中添加 Range 请求头，即可让服务器只返回所需部分：
async function downloadBytes(url, maxBytes) {
try {
const response = await fetch(url, {
headers: {
Range: `bytes=0-${maxBytes - 1}`
}
});
if (response.status === 206) {
// 成功：服务器支持 Range，返回部分内容
const arrayBuffer = await response.arrayBuffer();
const result = new Uint8Array(arrayBuffer);
const str = new TextDecoder().decode(result);
console.log(`Downloaded ${result.length} bytes`);
return str;
} else if (response.status === 200) {
// 边界情况：文件本身小于 maxBytes，服务器返回完整内容（非分段）
const arrayBuffer = await response.arrayBuffer();
const result = new Uint8Array(arrayBuffer);
console.log(`File is smaller than ${maxBytes} bytes; downloaded full ${result.length} bytes`);
return new TextDecoder().decode(result);
} else {
throw new Error(`Unexpected status: ${response.status}`);
}
} catch (error) {
console.error('Failed to download range:', error);
throw error;
}
}
// 示例：下载前 2MB（2,000,000 字节）
downloadBytes('https://speed.hetzner.de/1GB.bin', 2_000_000);✅ 优势： 每次请求都是独立、可缓存的范围请求，无状态干扰； 网络层真正停止传输多余字节，节省带宽与内存； 兼容所有现代浏览器，无需流处理逻辑； 服务端（如 Nginx、Apache、CDN）默认支持 Range，无需额外配置。
⚠️ 注意事项与健壮性增强
-
检查 Accept-Ranges 响应头（可选预检）
若需 100% 确保服务端支持 Range，可先发一个 HEAD 请求验证：async function supportsRange(url) { const headRes = await fetch(url, { method: 'HEAD' }); return headRes.headers.get('Accept-Ranges') === 'bytes'; } // 使用示例 if (await supportsRange(url)) { return downloadBytes(url, maxBytes); } else { console.warn('Server does not support Range requests; falling back to stream cancellation...'); // 此处可回退到带 AbortController 的流方案（见下文） } 处理小文件场景
当请求范围超出文件实际大小时，规范要求服务器返回 416 Range Not Satisfiable；但许多服务器（尤其是静态托管）会降级为返回完整 200 OK 响应。因此代码中需同时处理 200 和 206 状态码。-
回退方案：AbortController（客户端强制中断）
若服务端不支持 Range，可结合 AbortController 在获取足够字节后中止请求（比 reader.cancel() 更底层）：async function downloadWithAbort(url, maxBytes) { const controller = new AbortController(); const timeout = setTimeout(() => controller.abort(), 10000); // 超时保护 try { const response = await fetch(url, { signal: controller.signal }); const arrayBuffer = await response.arrayBuffer(); const full = new Uint8Array(arrayBuffer); const result = full.slice(0, maxBytes); return new TextDecoder().decode(result); } finally { clearTimeout(timeout); } }⚠️ 注意：AbortController 可中止请求，但无法保证已发出的 TCP 数据包被丢弃；它主要防止后续处理，适合作为 Range 不可用时的备选。
✅ 总结
- 首选 Range: bytes=0-N：简洁、高效、符合标准，适用于绝大多数静态资源服务器；
- 避免依赖 reader.cancel() 多次调用：受缓存和流生命周期限制，稳定性差；
- 始终校验 HTTP 状态码（200 vs 206），并做好小文件兜底；
- 如需极致兼容性，可组合 HEAD 预检 + Range 主请求 + AbortController 回退三层策略。
通过合理利用 HTTP 协议能力，你不仅能精准控制下载行为，还能显著提升 Web 应用的性能与健壮性。
