Что такое RxJS и как он интегрирован в Angular?
Что такое RxJS?
RxJS (Reactive Extensions for JavaScript) — это библиотека для реактивного программирования, основанная на потоках данных (streams) и наблюдаемых значениях (Observables).
RxJS предоставляет мощные инструменты для работы с:
- асинхронными событиями,
- потоками данных (например, HTTP-запросы, WebSocket, DOM-события),
- таймерами, вводом с клавиатуры, изменениями формы и т.д.
Как работает RxJS?
В основе RxJS лежит Observable — объект, который эмиттит данные во времени, на которые можно подписаться (subscribe) и обработать с помощью операторов (pipe).
import { Observable } from 'rxjs';
const obs$ = new Observable(observer => {
observer.next('Hello');
observer.next('RxJS');
observer.complete();
});
obs$.subscribe(value => console.log(value));
Выведет: Hello, затем RxJS.
Как RxJS интегрирован в Angular?
В Angular RxJS встроен по умолчанию, и используется почти в каждом важном элементе фреймворка:
| Где используется RxJS в Angular | Как именно |
|---|---|
HttpClient | Возвращает Observable вместо Promise |
| Reactive Forms | Поддержка реактивных изменений (valueChanges) |
| Router | Прослушивание навигации (router.events) |
| Services & State | Использование Subject, BehaviorSubject и др. |
| Async Pipe | Автоматическая подписка и отписка от Observable |
Пример: HTTP-запрос с RxJS в Angular
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-users',
template: `<ul><li *ngFor="let user of users">{{ user.name }}</li></ul>`
})
export class UsersComponent implements OnInit {
users: any[] = [];
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
.subscribe(data => this.users = data);
}
}
Основные операторы RxJS
Операторы используются в .pipe() для обработки потоков:
| Категория | Примеры | Описание |
|---|---|---|
| Фильтрация | filter, take, debounceTime | Пропуск/отбор нужных значений |
| Преобразование | map, switchMap, mergeMap | Преобразование или замена потока |
| Комбинирование | combineLatest, withLatestFrom | Объединение нескольких Observable |
| Управление ошибками | catchError, retry | Обработка ошибок |
Пример с pipe:
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
of(1, 2, 3, 4, 5)
.pipe(
filter(x => x % 2 === 0),
map(x => x * 10)
)
.subscribe(console.log); // Выведет: 20, 40
Subject vs BehaviorSubject
Subject— не сохраняет предыдущее значение, подписчики получают только новыеBehaviorSubject— сохраняет последнее значение и отдает его новым подписчикам
Управление подписками Важно отписываться от подписок, чтобы избежать утечек памяти:
import { Subscription } from 'rxjs';
export class MyComponent implements OnDestroy {
private sub!: Subscription;
ngOnInit() {
this.sub = this.myService.getData().subscribe();
}
ngOnDestroy() {
this.sub.unsubscribe(); // обязательно!
}
}
Или использовать async pipe:
<div *ngIf="data$ | async as data">
{{ data }}
</div>
Angular сам управляет подпиской и отпиской.
RxJS в Angular:
RxJS — основа реактивного подхода в Angular. Умение работать с Observables, операторами и Subject — ключ к созданию производительных и масштабируемых приложений.