Angular RxJS Operators ที่ใช้บ่อย: map, filter, switchMap, combineLatest

RxJS ใน Angular

Angular ใช้ RxJS อย่างหนักสำหรับ async operations ทำความเข้าใจ operators หลักๆ จะช่วยให้เขียนโค้ดได้ดีขึ้นมาก

map — แปลงค่า

import { map } from 'rxjs/operators';

this.http.get<User[]>('/api/users').pipe(
  map(users => users.filter(u => u.active)),
  map(users => users.map(u => u.name))
).subscribe(names => console.log(names));

filter — กรองค่า

import { filter } from 'rxjs/operators';

this.searchInput.valueChanges.pipe(
  filter(value => value.length >= 3)
).subscribe(value => this.search(value));

switchMap — ยกเลิก request เก่า

เหมาะกับ search ที่ต้องยกเลิก request เก่าเมื่อพิมพ์ใหม่

import { switchMap, debounceTime } from 'rxjs/operators';

this.searchInput.valueChanges.pipe(
  debounceTime(300),
  switchMap(query => this.searchService.search(query))
).subscribe(results => this.results = results);

mergeMap — รัน parallel

import { mergeMap } from 'rxjs/operators';

from(userIds).pipe(
  mergeMap(id => this.http.get<User>(`/api/users/${id}`))
).subscribe(user => console.log(user));

combineLatest — รวม observables

import { combineLatest } from 'rxjs';

combineLatest([
  this.userService.getUser(),
  this.settingsService.getSettings()
]).subscribe(([user, settings]) => {
  this.user = user;
  this.settings = settings;
});

forkJoin — รอทุก observable เสร็จ

import { forkJoin } from 'rxjs';

forkJoin({
  users: this.http.get<User[]>('/api/users'),
  posts: this.http.get<Post[]>('/api/posts')
}).subscribe(({ users, posts }) => {
  this.users = users;
  this.posts = posts;
});

takeUntilDestroyed (Angular 16+)

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class MyComponent {
  constructor() {
    this.userService.getUsers().pipe(
      takeUntilDestroyed()
    ).subscribe(users => this.users = users);
  }
}

สรุป

• map — แปลงข้อมูล
• filter — กรองข้อมูล
• switchMap — search, navigation
• mergeMap — parallel requests
• combineLatest — รวมหลาย stream
• forkJoin — รอทุกอันเสร็จ