Worker中可直接调用fetch(),现代浏览器(Chrome 80+等)已完整支持;需配合ReadableStream.getReader()分片读取,手动控制chunk大小与时机,并通过postMessage通信。

在 HTML5 中,Worker 无法直接调用 fetch()(因 Worker 环境虽支持 fetch,但部分浏览器对跨域、重定向或某些响应类型限制严格,且 Response.arrayBuffer() 等方法在旧版 Worker 中存在兼容性问题),更关键的是:Fetch API 在 Worker 中不能直接读取流式响应体并分片处理——因为 ReadableStream 的 getReader() 在 DedicatedWorker 中虽可用,但实际分片需手动控制 chunk 大小与时机,而原生 fetch 响应流不提供“按字节数截断”的能力。因此,“后台静默下载 + 分片处理”需组合使用 fetch + ReadableStream + TransformStream 或手动分块读取逻辑。
确保 Worker 环境支持 fetch 和流式读取
现代浏览器(Chrome 80+、Firefox 72+、Safari 16.4+)的 DedicatedWorker 已完整支持 fetch 和 ReadableStream。需注意:
- Worker 文件必须通过
new Worker('worker.js')加载,不能是内联脚本或 blob URL(部分 Safari 对 blob URL 的 fetch 有策略限制) - 请求需满足 CORS 策略;若目标资源不支持
Access-Control-Allow-Origin: *,可考虑服务端代理或使用no-cors模式(仅限简单请求,且响应不可读) - 避免在 Worker 中调用 DOM API(如
document),所有数据通信必须通过postMessage()
用 fetch 获取流式响应并分片读取
核心思路:用 response.body.getReader() 持续读取 Uint8Array 片段,每次读取指定字节数(如 64KB),并在 Worker 内完成解析/校验/暂存等操作:
// worker.js
self.onmessage = async ({ data: { url, chunkSize = 65536 } }) => {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
<pre class="brush:php;toolbar:false;">const reader = response.body.getReader();
let totalLoaded = 0;
while (true) {
const { done, value } = await reader.read();
if (done) break;
// value 是 Uint8Array,即当前 chunk
totalLoaded += value.length;
// ✅ 在此处分片处理:例如解密、校验 CRC、写入 IndexedDB、触发进度更新
processChunk(value, totalLoaded);
// 可选:每处理一块就通知主线程进度
self.postMessage({ type: 'progress', loaded: totalLoaded, chunk: value.length });
}
self.postMessage({ type: 'complete', total: totalLoaded });} catch (err) { self.postMessage({ type: 'error', message: err.message }); } };
function processChunk(chunk, offset) { // 示例:简单统计非零字节 let nonZero = 0; for (let i = 0; i
大文件分片处理的进阶技巧
若需真正“按逻辑分片”(如每 1MB 一个 JSON 对象、或按帧解析视频),而非单纯字节切分,需在流中识别边界:
-
缓冲累积 + 边界扫描:维护一个
Uint8Array缓冲区,每次读取后追加,再扫描换行符、JSON 分隔符或自定义标记,提取完整单元 -
使用 TransformStream 封装处理逻辑:例如构建一个
TextDecoderStream或自定义ParserTransformStream,将原始字节流转为结构化数据流 -
配合 AbortController 控制下载:主线程可随时发送
{ type: 'abort' }消息,Worker 中调用reader.cancel()终止读取
主线程调用与通信约定
主线程需正确初始化 Worker 并监听消息,同时避免阻塞 UI:
已加载 ${data.loaded} 字节
所谓“静默”,本质是不触发页面重绘、不依赖用户手势、不打开新窗口——Worker 完全后台运行,符合要求。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











