การตอบกลับแบบสตรีมจาก fetch

คำตอบคือสตรีม

const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array

การอ่านสตรีมเนื้อหา

const reader = res.body.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("received", value.length, "bytes");
}

การติดตามความคืบหน้าการดาวน์โหลด

const total = +res.headers.get("Content-Length");
let loaded = 0;
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  loaded += value.length;
  console.log(Math.round((loaded / total) * 100) + "%");
}

การถอดรหัสไบต์เป็นข้อความ

const decoder = new TextDecoder();
let text = "";
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  text += decoder.decode(value, { stream: true });
}

การใช้ TextDecoderStream

const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
  console.log(chunk);
}

การแยกวิเคราะห์ NDJSON

let buffer = "";
for await (const chunk of textStream) {
  buffer += chunk;
  let nl;
  while ((nl = buffer.indexOf("\n")) >= 0) {
    const line = buffer.slice(0, nl);
    buffer = buffer.slice(nl + 1);
    if (line) console.log(JSON.parse(line));
  }
}

โทเค็น LLM แบบสตรีม

การยกเลิกสตรีมจากการเรียกข้อมูล

const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();

การจัดการข้อผิดพลาดของสตรีม

try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
  }
} catch (err) {
  console.log("stream interrupted", err);
}

เมื่อใดไม่ควรใช้สตรีม

เนื้อหาคำตอบใช้ได้เพียงครั้งเดียว

const copy = res.clone();
await res.body.getReader().read();
// copy still readable

ตรวจสอบสั้น ๆ

สรุป: การเรียกข้อมูลแบบสตรีม