استجابات 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

إلغاء تدفق fetch

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

تحقق سريع

مراجعة: تدفق fetch