reveal.js

# Operators: map, filter, switchMap, catchError, tap

Lesson 5 - Angular Service, DI และการเชื่อมต่อ API

**RxJS Operators** คือฟังก์ชันสำหรับแปลง กรอง รวม หรือจัดการข้อผิดพลาดของ Observable โดยใช้งานผ่าน `pipe()` เพื่อประกอบขั้นตอนการประมวลผลข้อมูลแบบ Stream

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Array Methods / Synchronous Data"]
 A["map/filter/reduce ข้อมูลใน Array"]
 end
 subgraph Era2["ยุค Stream Operators / Async Stream"]
 B["pipe() ต่อ operator"]
 C["map/filter/tap แปลงและตรวจค่า"]
 end
 subgraph Era3["ยุค API Search / Request Control"]
 D["debounceTime ลด request"]
 E["switchMap ยกเลิก request เก่า"]
 end
 A --> B --> C --> D --> E
</pre>

---

## Operators สำคัญ

- **`pipe()`** ใช้รวม Operators หลายตัวต่อกัน
- **`map(value => transform)`** แปลงค่าของ Observable
- **`filter(value => condition)`** กรองค่าที่ผ่านเงื่อนไข
- **`tap(value => sideEffect)`** ดูค่าโดยไม่เปลี่ยนข้อมูล
- **`switchMap()`** แปลงเป็น Observable ใหม่และยกเลิก Request เก่า
- **`mergeMap()`** ทำงานพร้อมกันหลาย Stream
- **`concatMap()`** ทำงานตามลำดับทีละ Stream
- **`catchError(err => of(fallback))`** จัดการ Error ใน Stream
- **`debounceTime()` และ `distinctUntilChanged()`** เหมาะกับ Search Input

---

## ตารางเปรียบเทียบ Flattening Operators

| Operator | การจัดการ Request | ลำดับผลลัพธ์ | เหมาะกับ |
|---|---|---|---|
| `switchMap` | ยกเลิกของเก่า | เอาล่าสุด | Search, autocomplete |
| `mergeMap` | ทำพร้อมกัน | ไม่รับประกันลำดับ | งาน parallel |
| `concatMap` | ต่อคิวทีละงาน | รักษาลำดับ | Save หลายขั้น |
| `exhaustMap` | เมินงานใหม่จนงานเก่าเสร็จ | กันกดซ้ำ | Login/Submit |

---

## Mermaid Diagram: Search Pipeline

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 A["Search Input คำค้น"] --> B["debounceTime รอพิมพ์หยุด"]
 B --> C["distinctUntilChanged กันค่าซ้ำ"]
 C --> D["switchMap เรียก API ล่าสุด"]
 D --> E["catchError จัดการ Error"]
 E --> F["Result List แสดงผล"]
</pre>

---

## สมการคณิตศาสตร์: ลดจำนวน Request ด้วย debounce

- **R** คือจำนวน Request ที่เกิดขึ้นจริง
- **K** คือจำนวนครั้งที่ผู้ใช้พิมพ์หรือเปลี่ยนค่า
- **D** คือจำนวนเหตุการณ์ที่ถูกลดออกด้วย `debounceTime` และ `distinctUntilChanged`

---

## Code Example

```typescript
// search.component.ts
// ตัวอย่าง search input ด้วย RxJS operators
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { catchError, debounceTime, distinctUntilChanged, of, switchMap, tap } from 'rxjs';
import { UserApiService, User } from './user-api.service';

@Component({
 selector: 'app-search',
 template: `
 <input [formControl]="searchControl" placeholder="ค้นหาผู้ใช้">
 <ul>
 <li *ngFor="let user of users">{{ user.name }}</li>
 </ul>
 `
})
export class SearchComponent {
 searchControl = new FormControl('');
 users: User[] = [];

constructor(private userApi: UserApiService) {
    this.searchControl.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      tap(keyword => console.log('search:', keyword)),
      switchMap(keyword => this.userApi.searchUsers(keyword ?? '').pipe(
        catchError(() => of([]))
      ))
    ).subscribe(result => {
      this.users = result;
    });
  }
}

// ตัวอย่างการใช้งาน:
// เมื่อผู้ใช้พิมพ์ ระบบจะรอ 300ms แล้วเรียก API ล่าสุดเท่านั้น
```

---

## กิจกรรมท้ายบท

- สร้างช่องค้นหา
- ใช้ `debounceTime` และ `distinctUntilChanged`
- เรียก API ด้วย `switchMap`
- จัดการ Error ด้วย `catchError`

---

## End

<a href="/web-programming/08-angular-service-api/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>