Потоки для чтения
Получайте данные порциями.
«Потоки для чтения» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Что такое потоки
Интерфейс потоков обрабатывает данные по мере поступления частей, а не загружает всё в память сразу. Благодаря этому можно эффективно работать с огромными загрузками, видео и потоками данных в реальном времени.
ReadableStream
ReadableStream — это источник, из которого данные считываются по частям. Браузеры предоставляют такие потоки в ответах fetch, файловых объектах и других источниках.
Создание потока
Создайте его с помощью объекта исходного источника, у которого метод start(controller) помещает части в очередь и сообщает о завершении.
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});Получение средства чтения
getReader() блокирует поток и возвращает средство чтения. Пока поток заблокирован, другой потребитель не может его читать.
const reader = stream.getReader();Чтение частей
reader.read() возвращает обещание, разрешающееся в { value, done }. Свойство done становится равным true, когда поток исчерпан.
const { value, done } = await reader.read();
console.log(value, done);Цикл чтения
Повторяйте вызов read(), пока done не станет равным true, чтобы прочитать весь поток.
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}Освобождение блокировки
Вызовите reader.releaseLock(), чтобы разблокировать поток и передать его другому средству чтения.
reader.releaseLock();Метод pull
Исходный источник может определить pull(controller), который вызывается, когда потребителю нужны дополнительные данные, что позволяет создавать их лениво, по запросу.
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});Асинхронный перебор
В современных средах ReadableStream поддерживает асинхронный перебор, поэтому вместо ручного цикла можно использовать for await...of.
for await (const chunk of stream) {
console.log(chunk);
}Отмена потока
reader.cancel(reason) досрочно останавливает поток и освобождает ресурсы — это важно при прерывании больших загрузок.
await reader.cancel("user navigated away");tee: разделение потока
tee() возвращает два потока, каждый из которых получает копию каждой части. Это удобно, когда данные нужно прочитать дважды (например, для кэширования и отображения).
const [a, b] = stream.tee();
// read a and b independentlyБыстрая проверка
Проверьте читаемые потоки.
Итоги: читаемые потоки
Вы создали ReadableStream, получили средство чтения, обработали части с помощью read() в цикле, освободили блокировку, использовали pull для ленивого получения данных, выполнили асинхронный перебор с помощью for await и разделили поток через tee(). Далее — потоковая обработка ответов на запросы.
Часто задаваемые вопросы
Урок «Потоки для чтения» бесплатный?
Да — полный текст урока «Потоки для чтения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Потоки для чтения»?
Получайте данные порциями. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Потоки для чтения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.