JavaScript Academy · Урок

Потоковые ответы fetch

Обрабатывайте большие ответы по мере их поступления.

«Потоковые ответы fetch» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Ответы — это потоки

Объект Response, возвращаемый fetch, предоставляет тело в виде ReadableStream через response.body. Вместо ожидания всей payload можно обрабатывать байты по мере их поступления.

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

Чтение потока тела ответа

response.body выдаёт части типа Uint8Array. Получите средство чтения и выполняйте цикл так же, как для любого читаемого потока.

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

Отслеживание хода загрузки

Объедините заголовок Content-Length с количеством полученных байтов, чтобы показать индикатор выполнения.

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) + "%");
}

Декодирование байтов в текст

Используйте TextDecoder, чтобы преобразовать части байтов в строки. Передайте { stream: true }, чтобы многобайтные символы, разделённые между частями, декодировались правильно.

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

Использование TextDecoderStream

Есть более простой способ: пропустите поток байтов через TextDecoderStream, чтобы сразу получить поток строк.

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

Разбор NDJSON

JSON, разделённый переводами строк, передаёт один объект в каждой строке. Буферизуйте текст и выдавайте полные строки по мере их формирования.

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

Этот шаблон лежит в основе потокового чата с ИИ: каждая часть представляет собой токен или событие и отображается сразу после поступления, создавая эффект набора текста в реальном времени.

Прерывание потока запроса

Передайте AbortSignal в fetch и вызовите controller.abort(), чтобы корректно остановить долгий поток.

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

Обработка ошибок потока

Сетевые сбои в середине потока отклоняют обещание read(). Оберните цикл в конструкцию обработки исключений, чтобы обработать прерывания.

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

Когда потоковая обработка не нужна

Для небольших ответов проще использовать res.json() или res.text(). Выбирайте потоковую обработку, когда payload большой, поступает постепенно или не имеет ограниченного размера.

Тело ответа используется один раз

Прочитать response.body можно только один раз. Вызовите res.clone() перед чтением, если тело нужно использовать дважды (например, для кэширования).

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

Быстрая проверка

Проверьте потоковую обработку запросов.

Итоги: потоковая обработка запросов

Вы читали response.body по частям, отслеживали ход загрузки, декодировали байты с помощью TextDecoder/TextDecoderStream, разбирали NDJSON, прерывали поток через AbortController и обрабатывали ошибки. Далее — преобразующие потоки.

Часто задаваемые вопросы

Урок «Потоковые ответы fetch» бесплатный?

Да — полный текст урока «Потоковые ответы fetch» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Потоковые ответы fetch»?

Обрабатывайте большие ответы по мере их поступления. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Потоковые ответы fetch»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy