1. Зачем нужен RxJS в Angular
Добро пожаловать в RxJS
Это самый первый урок. Если вы никогда не работали с RxJS — не переживайте. Мы пойдём от самой простой идеи и будем двигаться маленькими шагами. К концу урока вы поймёте, что такое поток, Observable и подписка, и сможете написать ваш первый рабочий пример.
Какую проблему решает RxJS
В обычной программе мы привыкли: переменная имеет одно значение прямо сейчас. Но в реальных приложениях значения приходят со временем:
- Пользователь кликает по кнопке — событие приходит, когда он это сделает.
- Пользователь печатает в поле поиска — каждая буква приходит отдельно.
- Сервер отвечает на HTTP-запрос — ответ приходит через некоторое время.
- Таймер тикает каждую секунду — значения приходят регулярно.
RxJS даёт единый способ работать со всеми такими источниками. Этот способ называется поток (по-английски stream).
Глоссарий: ключевые термины
- Поток (stream) — это последовательность значений, которые появляются во времени. Представьте конвейерную ленту: на ней через какие-то промежутки появляются коробки.
- Observable — это объект RxJS, описывающий поток. Сам по себе он ничего не делает: это просто рецепт того, откуда брать данные.
- Подписка (subscribe) — момент, когда мы говорим: «начинай присылать мне значения». До подписки Observable молчит.
- Подписчик (subscriber) — функция, которая получает каждое значение. Это коллбэк внутри
subscribe(...). - Оператор
of— простейший способ создать Observable из набора готовых значений.
Мини-пример с разбором
of('click', 'http', 'timer').subscribe(value => console.log(value));Читаем слева направо: «создай поток из трёх значений → подпишись → для каждого значения выведи его в консоль». В консоли появятся три строки: click, http, timer.
Что нужно сделать
- В стартовом коде уже есть
const events$ = of();— но он пустой. Передайте вof(...)три строки:'click','http','timer'(через запятую). - Внутри
subscribeдопишитеconsole.log('Event: ' + value)— так каждое значение превратится в строку с префиксом. - Запустите код. В консоли должны появиться три строки в указанном порядке.
Подсказка по соглашению: переменные-Observable принято именовать с символом $ в конце. Это просто маркер для глаз — он не имеет особого смысла для JavaScript.
Важно для проверки
Проверка сравнивает строки вывода точно: тот же текст, тот же порядок, без лишних логов. Если добавите дополнительный console.log — проверка не пройдёт.
const { of } = Rx;
const events$ = of('click', 'http', 'timer');
events$.subscribe(value => {
console.log('Event: ' + value);
});