Observables คืออะไรและ Angular ใช้ RxJS อย่างไร?

Question

IT Interview Practice · Accepted Answer

**Observable** (จากไลบรารี **RxJS**) แสดงถึง **ลำธารของค่าต่างๆ เมื่อเวลาผ่านไป** ที่คุณสามารถสมัครสมาชิกได้ Angular ใช้ RxJS อย่างแพร่หลาย — คำขอ HTTP เหตุการณ์เราเตอร์ ฟอร์ม และ `EventEmitter` ล้วนขึ้นอยู่กับ Observable — ดังนั้นการเข้าใจเรื่องเหล่านี้จึงจำเป็น ## Observable vs Promise ```text Promise: a SINGLE future value, eager, can't cancel Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE ``` Observables สามารถส่งค่าหลายค่าได้ ทำงานเมื่อสมัครสมาชิกเท่านั้น และสามารถยกเลิกการสมัครสมาชิก (ยกเลิก) ได้ — ทำให้เหมาะสำหรับเหตุการณ์ ลำธาร และ HTTP ที่คุณอาจต้องการยกเลิก ## การสมัครสมาชิก ```ts import { HttpClient } from "@angular/common/http"; this.http.get("/api/users").subscribe({ next: (users) => this.users = users, // each emitted value error: (err) => console.error(err), // on error complete: () => console.log("done"), // stream finished }); ``` ไม่มีอะไรเกิดขึ้นจนกว่าคุณจะ `.subscribe()` — Observable เป็นแบบเกียจคร่านมือ ## ตัวดำเนินการแปลงลำธาร ```ts import { map, filter, debounceTime } from "rxjs/operators"; this.searchInput.valueChanges.pipe( debounceTime(300), // wait for typing to pause filter(text => text.length > 2), // ignore short queries map(text => text.trim()), // transform ).subscribe(query => this.search(query)); ``` ตัวดำเนินการ (โยงใน `.pipe()`) แปลงลำธารอย่างชัดเจน — debounce filter map ฯลฯ — แก้ปัญหา async ทั่วไป (เช่นค้นหา-ขณะ-พิมพ์) ได้อย่างสวยงาม ## อันตรายของการรั่วไหลของหน่วยความจำ: ยกเลิกการสมัครสมาชิก ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks ``` ต้องล้างการสมัครสมาชิกด้วยตนเองใน `ngOnDestroy` มิฉะนั้นจะยังคงทำงานหลังจากที่คอมโพเนนต์หายไป — การรั่วไหลของหน่วยความจำ วิธีแก้ปัญหาทั่วไป: **`async` pipe** (ยกเลิกการสมัครสมาชิกโดยอัตโนมัติ) หรือ `takeUntilDestroyed()` ```html

``` ## ทำไมถึงสำคัญ RxJS Observables ถูกทอไปทั่ว Angular — คุณไม่สามารถใช้ HttpClient ฟอร์มแบบรีแอกทีฟ หรือเราเตอร์ได้หากไม่มี การทำความเข้าใจการสมัครสมาชิก ตัวดำเนินการ และโดยเฉพาะอย่างยิ่ง **การยกเลิกการสมัครสมาชิก** (หรือใช้ `async` pipe เพื่อหลีกเลี่ยงการจัดการด้วยตนเอง) มีความสำคัญสูงสุด: เป็นทั้งแหล่งที่มาของพลังของ Angular สำหรับข้อมูล async และเป็นหนึ่งในสิ่งที่พลาดได้ง่ายที่สุด (รั่วไหลจากการสมัครสมาชิกที่ลืมไป)

Observable vs Promise

การสมัครสมาชิก

ตัวดำเนินการแปลงลำธาร

อันตรายของการรั่วไหลของหน่วยความจำ: ยกเลิกการสมัครสมาชิก

ทำไมถึงสำคัญ

คำถามที่เกี่ยวข้อง