Вопрос проверяет знание классификации операторов RxJS, что необходимо для эффективной работы с реактивными потоками данных.
Операторы RxJS — это функции, которые позволяют манипулировать потоками данных, создаваемыми Observable. Они делятся на несколько групп в зависимости от выполняемой задачи. Понимание этих категорий помогает писать чистый и декларативный код для асинхронных операций.
Эти операторы создают новые Observable из различных источников: значений, массивов, событий или промисов.
import { of, from, interval } from 'rxjs';
of(1, 2, 3).subscribe(console.log); // 1, 2, 3
from([4, 5, 6]).subscribe(console.log); // 4, 5, 6
interval(1000).subscribe(console.log); // 0, 1, 2, ... каждую секундуИзменяют каждое значение в потоке или преобразуют один Observable в другой.
import { map, switchMap } from 'rxjs/operators';
of(1, 2, 3).pipe(
map(x => x * 10)
).subscribe(console.log); // 10, 20, 30
// switchMap отменяет предыдущий внутренний Observable
fromEvent(input, 'input').pipe(
switchMap(value => fetchData(value))
).subscribe(console.log);Позволяют пропускать только те значения, которые удовлетворяют условию, или ограничивать количество значений.
import { filter, take, debounceTime } from 'rxjs/operators';
of(1, 2, 3, 4, 5).pipe(
filter(x => x % 2 === 0),
take(2)
).subscribe(console.log); // 2, 4
fromEvent(input, 'input').pipe(
debounceTime(300)
).subscribe(console.log); // ждёт 300 мс после последнего вводаОбъединяют несколько Observable в один.
import { combineLatest, merge, forkJoin } from 'rxjs';
combineLatest([obs1$, obs2$]).subscribe(([val1, val2]) => {
console.log(val1, val2);
});
merge(obs1$, obs2$).subscribe(console.log); // значения из обоих потоков по мере появления
forkJoin({ a: obs1$, b: obs2$ }).subscribe(console.log); // ждёт завершения всехПозволяют обрабатывать ошибки и выполнять побочные эффекты.
import { catchError, retry, tap } from 'rxjs/operators';
http$.pipe(
retry(3),
catchError(err => of('fallback')),
tap(value => console.log('Received:', value))
).subscribe(console.log);Вывод: Операторы RxJS — это мощный инструмент для работы с асинхронными потоками. Их правильное использование позволяет писать декларативный, легко тестируемый и поддерживаемый код, особенно в приложениях с большим количеством событий, запросов или стримов данных.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультациюFrontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию