Fetch 响应体流式保存到 OPFS 实践

概述通过读取响应流并逐块写入 OPFS，可降低内存占用并提高稳定性。流式保存async function saveResponseToOPFS(url, path) {

const res = await fetch(url);

if (!res.body) { const buf = await res.arrayBuffer(); return writeAll(path, new Uint8Array(buf)); }

const root = await navigator.storage.getDirectory();

const segments = path.split('/').filter(Boolean);

let dir = root; for (let i=0;i<segments.length-1;i++) dir = await dir.getDirectoryHandle(segments[i], { create: true });

const fh = await dir.getFileHandle(segments[segments.length-1], { create: true });

const ws = await fh.createWritable();

const reader = res.body.getReader();

while (true) {

const { value, done } = await reader.read();

if (done) break;

await ws.write(value);

}

await ws.close();

}

async function writeAll(path, bytes) {

const root = await navigator.storage.getDirectory();

const segments = path.split('/').filter(Boolean);

let dir = root; for (let i=0;i<segments.length-1;i++) dir = await dir.getDirectoryHandle(segments[i], { create: true });

const fh = await dir.getFileHandle(segments[segments.length-1], { create: true });

const ws = await fh.createWritable(); await ws.write(bytes); await ws.close();

}